import {Image, Progress, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from './curHistory.module.scss'
import {useState} from "react";
import {userApi} from "@/api";
import {formatDateTime, formatMinute} from "@/utils/time";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";

const CurHistory = () => {
  const [show, setShow] = useState(false)
  const {course_id, name} = Taro.getCurrentInstance().preloadData as { course_id: number, name: string }
  const [data, setData] = useState<userRecord[]>([])
  const [course, setCourse] = useState<Curriculum | null>(null)
  const [hours, setHours] = useState<Hour[] | null>(null)
  const [durations, setDuration] = useState<Record<number, number> | null>(null)
  const [time, setTime] = useState<Record<number, { start: number, end: number }> | null>(null)

  Taro.useLoad(() => {
    Taro.setNavigationBarTitle({title: name})
    userApi.courseRecord(course_id).then(res => {
      setData(Object.values(res.data))
      setCourse(res.course)
    })
  })

  async function setHour(unique_ident: number) {
    const res = await userApi.hourCourse(course_id, unique_ident)
    setHours(Object.values(res.courseHour))
    setDuration(res.duration)
    setTime(res.date)
    setShow(true)
  }

  function percent(duration: number): number {
    if (!course?.course_duration) return 0
    return Number((duration / course.course_duration * 100).toFixed(2))
  }

  function getTime(id: number): string {
    const start = formatDateTime(new Date(time?.[id].start || 0), 'MM/dd HH:mm')
    const end = formatDateTime(new Date(time?.[id].end || 0), 'MM/dd HH:mm')
    return `${start} - ${end}`
  }

  function hourPercent(id: number, duration: number): number {
    const viewingTime = durations?.[id] || 0
    console.log(viewingTime,duration)
    return Number((viewingTime / duration * 100).toFixed(2))
  }

  return (
    <View>
      <View className={styles.cur}>
        <Image src={course?.thumb || ''} mode='widthFix'/>
        <View>{name}</View>
      </View>


      <View className={styles.record}>
        {data.map(d => <View key={d.id} onClick={() => setHour(d.unique_ident)} className={styles.recordItem}>
          <View>{formatDateTime(new Date(d.start_at), "MM/dd HH:ss")} - {formatDateTime(new Date(d.end_at), "MM/dd HH:ss")}</View>
          <View>观看视频：{formatMinute(d.duration)}</View>
          <Progress
            percent={percent(d.duration)}
            showInfo
            borderRadius={10}
            active
            duration={10}
            strokeWidth={10}
            color={'#45D4A8'}
          />
        </View>)}
      </View>

      <CustomPageContainer
        show={show}
        round
        onAfterLeave={() => setShow(false)}>
        {show && <View className={styles.hourRecord}>

          {
            hours?.map(d => <View>
                <View className={styles.recordItem}>
                  <View>{d.title}</View>
                  <View>{getTime(d.id)}</View>
                  <Progress
                    percent={hourPercent(d.id, d.duration)}
                    showInfo
                    duration={10}
                    borderRadius={10}
                    active
                    strokeWidth={10}
                    color={'#45D4A8'}
                  />
                </View>
              </View>
            )
          }
        </View>}
      </CustomPageContainer>
    </View>
  )
}

export default CurHistory