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

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

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

  return (
    <>
      <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
        {process.env.TARO_ENV !== "h5" && <View className='text-center font-weight font-34 mt-3'>医学道</View>}
        <Tabs tabList={category} onChange={tabChange} current={categoryKey}/>
        <VideoList categoryKey={categoryKey}/>
      </View>
    </>
  )
}

export default Index