import {FC, useState} from "react";
import {View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from './index.module.scss'
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
import {Profile} from '@/store'
import {Search} from "@/pages/index/components/search";
import {VideoList} from "@/pages/index/components/videoList";
import {CoursesKey} from "@/api/public";


const Index: FC = () => {
  const category: TabList[] = [
    {title: "必修", value: 'is_required'},
    {title: "选修", value: 'is_not_required'},
    {title: "已完成", value: 'is_finished'},
    {title: "未完成", value: 'is_not_finished'},
  ]
  const [categoryId, setCategoryId] = useState<CoursesKey>('is_required')

  function tabChange(data: OnChangOpt) {
    setCategoryId(data.tab?.value as CoursesKey)
  }


  const globalData = Taro.getApp().globalData
  return (
    <Profile.Provider>
      <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
        <View className='text-center font-weight font-34 mt-3'>医学道</View>
        <Search/>
        <Tabs tabList={category} onChange={tabChange} current={categoryId}/>
        <VideoList categoryId={categoryId}/>
        <View className='text-center text-muted mt-3'>- 暂无更多 -</View>
      </View>
    </Profile.Provider>
  )
}

export default Index