import { Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import AlbumList from '../album'
import Practice from './practice'
import Personal from './personal'
import Collection from './collection'
import Album from './album'
import AlbumMy from './album-my'

import styles from './index.module.less'
import { getRandomKey } from '../music'
import { useEventTracking } from '@/helpers/hooks'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'MusicPersonal',
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const tabValue = sessionStorage.getItem('music-personal-tab-value')
    sessionStorage.removeItem('music-personal-tab-value')
    const activeTab = ref(tabValue || 'personal')
    sessionStorage.setItem('music-personal-tab-value', activeTab.value)
    const personal = ref()
    const collection = ref()
    const practice = ref()
    onMounted(() => {
      useEventTracking('我的乐谱')
    })
    return () => {
      return (
        <div class={styles.personal}>
          <ColHeader />
          <Practice
            ref={practice}
            onFavorite={() => {
              if (activeTab.value === 'personal') {
                personal.value?.reset?.()
              } else if (activeTab.value === 'collection') {
                collection.value?.reset?.()
              }
            }}
          />
          <Tabs
            color="var(--van-primary)"
            background="transparent"
            lineWidth={20}
            shrink
            v-model:active={activeTab.value}
            // onChange={val => (activeTab.value = val)}
            onChange={val => {
              activeTab.value = val
              sessionStorage.setItem('music-personal-tab-value', val)
            }}
          >
            <Tab title="我的单曲" name="personal"></Tab>
            <Tab title="我的专辑" name="personal-album"></Tab>
            <Tab title="收藏单曲" name="collection"></Tab>
            <Tab title="收藏专辑" name="album"></Tab>
            <Tab title="赠送单曲" name="personal-gift"></Tab>
            <Tab title="赠送专辑" name="album-gift"></Tab>
          </Tabs>
          {(activeTab.value === 'personal' ||
            activeTab.value === 'personal-gift') && (
            <Personal
              ref={personal}
              gift={activeTab.value === 'personal-gift' ? 1 : 0}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {(activeTab.value === 'personal-album' ||
            activeTab.value === 'album-gift') && (
            <AlbumMy gift={activeTab.value === 'album-gift' ? 1 : 0} />
          )}
          {activeTab.value === 'collection' && (
            <Collection
              ref={collection}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {activeTab.value === 'album' && <Album />}
        </div>
      )
    }
  }
})
