import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { useLocalStorage } from '@vueuse/core'
import AlbumList from '../album'
import styles from './index.module.less'
import { useRoute, useRouter } from 'vue-router'
import { getRandomKey } from '../music'
import { mitter } from './header'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import AllSearch from './all-search'
import MusicSwiper from './music-swiper'

export default defineComponent({
  name: 'MusicSearch',
  emits: ['confirm'],
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const route = useRoute()
    const router = useRouter()
    const keyword = ref(route.query.keyword || '')
    const tagids = ref(route.query.tagids || '')
    const subject = ref()
    const tagVisibility = ref(false)
    const words = useLocalStorage<string[]>('music-search', [])
    const activeTab = ref('all')

    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
    subject.value = getSubject.id

    const onSearch = val => {
      console.log(val, 'val')
      keyword.value = val
      const indexOf = words.value.indexOf(val)
      if (indexOf > -1) {
        words.value.splice(indexOf, 1)
      }
      if (val) {
        words.value.unshift(val)
        words.value.length = Math.min(words.value.length, 10)
      }
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onSearch?.(val)
    }

    const onComfirm = tags => {
      const data = Object.values(tags).flat().filter(Boolean).join(',')
      tagids.value = data
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onComfirm?.(tags)
      tagVisibility.value = false
    }

    const onConfirmSubject = (item: any) => {
      subject.value = item.id
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onComfirmSubject?.(item)
    }

    const albumList = ref(null)
    const musicList = ref(null)

    const changeTab = (val: any) => {
      console.log(val, 'val')
      activeTab.value = val
    }

    onMounted(() => {
      mitter.on('changeTab', changeTab)
      mitter.on('search', onSearch)
      mitter.on('confirm', onComfirm)
      mitter.on('confirmSubject', onConfirmSubject)

      console.log(activeTab.value, 'activeTab.value')
    })

    onUnmounted(() => {
      mitter.off('changeTab', changeTab)
      mitter.off('search', onSearch)
      mitter.off('confirm', onComfirm)
      mitter.off('confirmSubject', onConfirmSubject)
    })

    return () => {
      return (
        <div class={styles.search}>
          {activeTab.value === 'all' && (
            <AllSearch
              defauleParams={{
                albumTagIds: tagids.value,
                subjectIds: subject.value
              }}
            />
          )}
          {activeTab.value === 'album' && (
            <AlbumList
              hideSearch
              ref={albumList}
              defauleParams={{
                albumTagIds: tagids.value,
                subjectIds: subject.value
              }}
            />
          )}
          {activeTab.value === 'songe' && (
            <div class={styles.musicGroup}>
              <MusicSwiper
                defauleParams={{
                  musicTagIds: tagids.value,
                  subjectIds: subject.value
                }}
              />
            </div>
          )}
        </div>
      )
    }
  }
})