import {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'
import Spin from "@/components/spinner";
import VideoList from "@/components/videoList/videoList";

interface KillData {
  data: VideList[]
  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)
  const [enable, setEnable] = useState(true)
  const [loading, setLoading] = useState(false)

  /**
   * more 开启加载更多
   */
  async function getData(more = false) {
    if (!categoryId) return;
    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
    }

    try {
      setLoading(true)
      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)
    } catch (e) {
    }
    setLoading(false)
  }

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

  async function getCategory() {
    try {
      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)
    } catch (e) {
    }
    setEnable(false)
  }

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


  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}>
        <View className={styles.container}>

          {
            data.data.map(d => <VideoList data={d} errorType='profession'/>)
          }
        </View>
        <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
      </ScrollView>
    )
  }


  return (
    <>
      <Spin enable={enable} overlay/>
      <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} className='relative'>
            <Spin enable={loading} block/>
            {KillList(data.get(Number(d.value))!)}
          </SwiperItem>)
        }
      </Swiper>
    </>
  )
}
export default Profession