import {Image, Text, View} from "@tarojs/components";
import {FC, useState} from "react";
import {CourseDepData, curriculum} from "@/api";
import './videoInfo.scss'
import {Profile} from '@/store'
import Catalogue from "./components/catalogue";
import Course from "./components/course";
import Taro from "@tarojs/taro";
import eventsIndex from "@/hooks/eventsIndex";


const VideoInfo: FC = () => {
  const {id, depId} = Taro.getCurrentInstance().preloadData as { id: number, depId: number | null }
  const [data, setData] = useState<CourseDepData | null>(null)
  const [playId, setPlayId] = useState<number | null>(null)
  const [preview, setPreview] = useState(false)

  eventsIndex.trigger(12)


  async function getData() {
    const res = await curriculum.courseDep(id, depId)
    if (res) {
      setData(res)
    }
    /** 用于自动播放 判断当前课程是否完成 */
    if (playId) {
      currentVideo()
    }
  }

  function setHors(is_complete: boolean, play_id: number) {
    setPreview(is_complete)
    setPlayId(play_id)
  }

  Taro.useLoad(() => {
    getData()
  })

  /** 播放下一个视频 */
  function playNext() {
    const flats: Hour[] = Object.values(data?.hours || {}).flat(Infinity) as Hour[]
    if (playId === flats.at(-1)?.id) {
      Taro.showModal({title: '当前课程结束'})
      return;
    }
    for (const [index, flat] of flats.entries()) {
      if (flat.id === playId) {
        const next = flats[index + 1]
        if (next) {
          Taro.showModal({
            title: '是否播放下一个视频',
            success({confirm}) {
              if (confirm) {
                setPlayId(next.id)
                setPreview(false)
              }
            }
          })
        }
        return
      }
    }
  }

  /**
   * 判断当前课程是否完成
   */
  function currentVideo() {
    const courseHourRecordsFinish = data?.learn_hour_records.find(d => d.id === playId)?.courseHourRecordsFinish
    if (typeof courseHourRecordsFinish === 'number') {
      if (courseHourRecordsFinish === 1) {
        playNext()
      } else {
        Taro.showModal({
          title: '有考卷还未完成',
          content: '未完成考卷不能播放下一个视频',
          confirmText: '考试',
          success({confirm}) {
            confirm && Taro.navigateTo({url: `/pages/business/test/test?testId=${playId}`})
          }
        })
      }
    }
  }

  Taro.useDidShow(() => {
    if (data) {
      getData().then()
    }
  })


  return (
    <Profile.Provider>
      <View className='content'>
        <View className='content-video'>
          {playId ?
            <Course id={playId} courseId={id} curEnd={getData} preview={preview}/>
            : <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>}
        </View>

        <View className='header'>
          <View className='flex justify-between text-muted'>
            <Text className='font-34 text-warning'>{data?.is_required ? '必修' : '选修'}</Text>
            <Text>{data?.course.class_hour}课时</Text>
          </View>
          <View className='font-weight font-40 my-4'>{data?.course.title}</View>
          <View className='text-muted font-26'>
            <Text>学习进度{data?.learn_hour_records.length || 0}/{data?.course.class_hour}</Text>
          </View>
        </View>

        <Catalogue data={data} setHors={setHors} id={id}/>
      </View>
    </Profile.Provider>
  )
}

export default VideoInfo