import {Image, View} from "@tarojs/components";
import styles from '../../my.module.scss'
import Taro from "@tarojs/taro";
import {Course} from "@/api";
import {FC, useEffect, useState} from "react";
import {formatMinute} from "@/utils/time";
import time1 from "@/static/img/time1.png";
import time2 from "@/static/img/time2.png";
import {Profile} from "@/store";

interface List {
  title: string
  time: string | number
  src: string,
  type?: number
}

interface Props {
  courseRecord: Course | undefined
}

const Time: FC<Props> = ({courseRecord}) => {
  const {token} = Profile.useContainer()
  const [list, setList] = useState<List[]>([
    {title: '今日时长', time: '00:00', src: time1},
    {title: '累计时长', time: '00:00', src: time2},
  ])

  useEffect(() => {
    if (!courseRecord) return;
    const oldList: List[] = JSON.parse(JSON.stringify(list))
    oldList[0].time = formatMinute(courseRecord.today_learn_time)
    oldList[1].time = formatMinute(courseRecord.total_learn_time)
    setList(oldList)
  }, [courseRecord])

  function jump(type?: number) {
    if (!token) {
      Taro.navigateTo({url: '/pages/login/login'})
      return;
    }
    if (!type) return;
    Taro.navigateTo({url: "/pages/business/courType/courType?type=" + type})
  }


  return (
    <View className='flex mt-3 justify-between flex-wrap'>
      {
        list.map(d => {
          return (
            <View className={styles.timeBox} key={d.title} onClick={() => jump(d.type)}>
              <View className={styles.timeBoxFlex}>
                <View>
                  <View className='mb-2 font-28 font-weight'>{d.title}</View>
                  {token && <View className='text-muted font-26 mt-1'>{d.time}</View>}
                </View>
                <Image src={d.src} mode='aspectFit' className={styles.timeImag}/>
              </View>
            </View>
          )
        })
      }
    </View>
  )
}

export default Time
