import {FC, useEffect, 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, publicApi} from "@/api/public";
import NavigationBar from "@/components/navigationBar/navigationBar";
import Spin from "@/components/spinner";
import {isBoolean} from "@tarojs/shared";
import ArticlesBox from "@/components/articlesBox/articlesBox";

const category: TabList[] = [
  {title: "企选课程", value: 'is_required'},
  {title: "平台课程", value: 'is_not_required'},
]

const Index: FC = () => {
  const [categoryKey, setCategoryKey] = useState<CoursesKey>('is_required')

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

  return (
    <View className={styles.content}>
      <NavigationBar
        cancelBack
        leftNode={<Tabs tabList={category} onChange={tabChange} current={categoryKey}/>}
        backgroundColor={'transparent'}
      />
      <VideoList
        categoryKey={categoryKey}
        setCategoryKey={(categoryKey) => setCategoryKey(categoryKey)}
      />
    </View>
  )
}

const AuditMode: FC = () => {
  const [auditMode, setAuditMode] = useState(false)
  const [articles, setArticles] = useState<any[]>([])
  const [enable, setEnable] = useState(true)
  useEffect(() => {
    publicApi.course({page: 1, pageSize: 10}).then(res => {
      setAuditMode(isBoolean(res.audit_mode) ? res.audit_mode : res.audit_mode === 'true')
      setArticles(res.articles)
      setEnable(false)
    })
  }, [])
  return (
    <>
      <Spin enable={enable} overlay/>
      {
        auditMode ?
          <>
            <NavigationBar text='文章列表' cancelBack/>
            <View className='bg-white rounded-20 clip m-3 px-3'>
              {
                articles.map(d => <ArticlesBox data={d}/>)
              }
            </View>
            <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
          </>
          : <Index/>
      }
    </>
  )
}

export default AuditMode