import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
import {HomeApi} from "@/api";
import {useEffect, useState} from "react";
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
import Empty from "@/components/empty/empty";
import Taro from "@tarojs/taro";
import styles from './profession.module.scss'

interface KillData {
  data: Kill[]
  total: number
  page: number
}

const Profession = () => {
  const [tabs, setTabs] = useState<TabList[]>([])
  const [categoryId, setCategoryId] = useState<number | null>(null)
  const [data, setData] = useState<Map<number, KillData>>(new Map)

  /**
   * more 开启加载更多
   */
  async function getData(more = false) {
    if (categoryId) {
      const oldData = new Map<number, KillData>(data)
      const categoryData = oldData.get(categoryId)
      const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1

      /** 无更多 */
      if (more && categoryData && categoryData.data.length >= categoryData.total) {
        return
      }

      const res = await HomeApi.skillList(categoryId!, page, 10)
      const dataList = res.data.reduce((pre, cur) => {
        const index = pre.findIndex(d => d.id === cur.id)
        if (index === -1) {
          pre.push(cur)
        } else {
          pre.splice(index, 1, cur)
        }
        return pre
      }, categoryData?.data || [])
      oldData.delete(categoryId)

      oldData.set(categoryId, {
        data: dataList,
        total: res.total,
        page: page
      })
      setData(oldData)
    }
  }

  useEffect(() => {
    categoryId && getData()
  }, [categoryId])

  async function getCategory() {
    const res = await HomeApi.skillCategory()
    const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id}))
    setTabs(newTabs)
    setCategoryId(newTabs[0].value as number)
  }

  function tabsChange(tab: OnChangOpt) {
    setCategoryId(tab.tab?.value as number)
  }

  function jump(url: string) {
    Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
  }

  function swiperChange(e) {
    const categoryId = tabs[e.target.current].value
    setCategoryId(Number(categoryId))
  }

  Taro.useLoad(getCategory)

  function KillList(data: KillData): JSX.Element {
    if (!data?.data?.length) {
      return <Empty name='暂无数据'/>
    }
    return (
      <ScrollView
        scrollY
        onScrollToLower={() => getData(true)}
        className={styles.height}>
        {
          data.data.map(d =>
            <View className={styles.killBox} onClick={() => jump(d.resource.url)} >
              <Image src={d.url_path} mode='widthFix'/>
              <View className='text-ellipsis flex-1'>{d.resource.name}</View>
            </View>
          )
        }
      </ScrollView>
    )
  }


  return (
    <>
      <View className='bg-white'>
        <Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/>
      </View>

      <Swiper
        current={tabs.findIndex(d=>d.value === categoryId)}
        onChange={swiperChange}
        className={styles.height}
        style={{paddingTop: '10px'}}>
        {
          tabs.map(d => <SwiperItem key={d.title}>
            {KillList(data.get(Number(d.value))!)}
          </SwiperItem>)
        }
      </Swiper>
    </>
  )
}
export default Profession