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 Img from "@/components/image/image";
import {beforeTime} from "@/utils/time";
import {isBoolean} from "@tarojs/shared";

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'>
              {
                articles.map((d, i) => <View className='p-3 relative'>
                  {i > 0 && <View className='absolute top left right divided ml-3 mr-3'/>}
                  <View className="font-34 text-black">{d.title}</View>
                  {(d.intro || '').length > 40 && (<View className='flex mt-1'>
                    <View className="flex-1 font-24 lh1_5">{d.intro}</View>
                    {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce"/>}
                  </View>)}
                  <View className="flex mt-3 justify-between font-24 text-muted">
                    <View>{beforeTime(d.created_at)}</View>
                    <View>阅读 {d.page_view || 0}</View>
                  </View>
                </View>)
              }
            </View>
            <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
          </>
          : <Index/>
      }
    </>
  )
}

export default AuditMode
