import {Image, Radio, View} from "@tarojs/components";
import {getCurrentInstance} from "@tarojs/runtime";
import {ManageApi} from "@/api/manage";
import React, {FC, useCallback, useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import styles from './addCur.module.scss'
import Empty from "@/components/empty/empty";
import MyButton from "@/components/button/MyButton";


const AddCur: FC = () => {
  const {id} = getCurrentInstance()?.router?.params as { id: string }
  const [courseId, setCourseId] = useState<number[]>([])
  const [data, setData] = useState<Curriculum[]>([])
  const [page] = useState(1)


  const getData = useCallback(async () => {
    try {
      const res = await ManageApi.optionalCur(Number(id), page, 10)
      if (res.length) {
        setData(res)
      }
    } catch (e) {

    }
  }, [page])

  useEffect(() => {
    getData()
  }, [])


  function addCur(id: number) {
    const index = courseId.indexOf(id)
    if (index === -1) {
      setCourseId([...courseId, id])
    } else {
      const old: number[] = JSON.parse(JSON.stringify(courseId))
      old.splice(index, 1)
      setCourseId(old)
    }
  }

  function addAll() {
    if (courseId.length === data.length) {
      setCourseId([])
    } else {
      const courseIds = data.map(d => d.id)
      setCourseId(courseIds)
    }
  }

  function addCourses() {
    console.log(courseId)
    if (!courseId.length) return;

    Taro.showModal({
      title: "请选择课程类型",
      cancelText: '选修',
      confirmText: '必修',
      async success({confirm}) {
        try {
          Taro.showLoading()
          const is_required = confirm ? 1 : 0
          await ManageApi.addCur({course_id: courseId, dep_id: [Number(id)], is_required: [is_required]})

          const newData = data.reduce((pre, cur) => {
            if (!courseId.includes(cur.id)) {
              pre.push(cur)
            }
            return pre
          }, [] as Curriculum[])
          setData(newData)
          Taro.showToast({title: "添加成功"})
        } catch (e) {
        }
        Taro.hideLoading()
      }
    })
  }

  return (
    <>
      {
        data.length ?
          <View className='flex flex-wrap bg-white'>
            {data?.map((d) =>
              <View key={d.id} className={styles.curBox} onClick={() => addCur(d.id)}>
                <Radio checked={courseId.includes(d.id)} onClick={() => addCur(d.id)} color='#45d4a8'/>
                <View className='flex'>
                  <Image fadeIn lazyLoad src={d.thumb} className={styles.image}/>
                  <View>{d.title}</View>
                </View>
              </View>
            )}

            <View className={styles.fixed}>
              <View className={styles.addAll}>
                <Radio checked={courseId.length === data.length} onClick={addAll}>全选</Radio>
                <MyButton size='mini' onClick={addCourses}>添加{courseId.length}</MyButton>
              </View>
            </View>
          </View>
          : <Empty name='无更多课程'/>
      }
    </>
  )
}

export default AddCur