import {FC, useCallback, useEffect, useState} from "react";
import {Image, Input, Radio, View} from "@tarojs/components";
import styles from "../courseAdmin.module.scss";
import Icon from "@/components/icon";
import {CourseAllParam, curriculum} from "@/api";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import Empty from "@/components/empty/empty";
import MyButton from "@/components/button/MyButton";
import downArrow from '@/static/img/downArrow.png'
import downArrowKey from '@/static/img/downArrowKey.png'
import omit from '@/static/img/omit.png'
import Taro from "@tarojs/taro";

interface Props {
  param: CourseAllParam
  setParam: (data: CourseAllParam) => void
  total: number
  setBatch: (data: boolean) => void
}

export const Search: FC<Props> = ({param, setParam, total, setBatch}) => {
  const [show, setShow] = useState(false)
  const [deps, setDeps] = useState<Manage[]>([])
  const [depId, setDepId] = useState<number>(param.dep_id)
  const [title, setTitle] = useState(param.title)


  function onBatch() {
    Taro.showActionSheet({
      itemList: ['批量添加部门'],
      success({tapIndex}) {
        switch (tapIndex) {
          case 0:
            setBatch(true)
            break
        }
      },
      fail() {
      }
    })
  }

  async function getDepList() {
    try {
      const res = await curriculum.department()
      setDeps(res.data)
    } catch (e) {
    }
  }

  const changeDepId = useCallback((id: number) => {
    if (id === depId) {
      setDepId(0)
    } else {
      setDepId(id)
    }
  }, [depId])

  const putParam = useCallback(() => {
    setShow(false)
    if (param.dep_id !== depId) {
      setParam({
        ...param,
        dep_id: depId,
        page: 1
      })
    }
  }, [depId])

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

  return (
    <>
      <View className={styles.searchBox}>
        <View className={styles.searchInput}>
          <Icon name='search' size={18} color='#909795'/>
          <Input
            adjustPosition={false}
            type='text'
            confirmType='search'
            placeholder='搜索课程名称'
            className='ml-1 flex-1'
            value={title}
            onInput={(e) => setTitle(e.detail.value)}
            onConfirm={(e) => setParam({
              ...param,
              title: e.detail.value,
              page: 1
            })}
          />
        </View>
        <View className='mt-3 flex justify-between font-24 text-dark align-center'>
          <View className="flex">
            <View onClick={() => setShow(true)} className={styles.select}>
              选择部门
              <Image src={downArrow} mode='widthFix' className={styles.icon}/>
            </View>

            {
              param.dep_id > 0
              && <View className={'ml-5' + ` ${styles.select}`}
                       style={{background: 'rgba(68,215,170,.08)', color: '#44d7aa'}}>
                {deps.find(d => d.id === param.dep_id)?.name}
                <Image src={downArrowKey} mode='widthFix' className={styles.icon}/>
              </View>
            }
            <View>
            </View>
          </View>

          <View className='flex align-center' onClick={onBatch}>
            {total}个课程
            <Image src={omit} className={styles.icon}/>
          </View>
        </View>
      </View>


      <CustomPageContainer show={show} position='top' onClickOverlay={() => setShow(false)}>
        <View className={styles.custom}>
          {deps.length ?
            <>
              {
                deps?.map(dep => <View
                  key={dep.id}
                  className={styles.radioBox}
                  onClick={() => changeDepId(dep.id)}>
                  <Radio
                    value={String(dep.id)}
                    checked={depId === dep.id}/>
                  {dep.name}
                </View>)
              }

              <View className='flex justify-around mt-2 align-center'>
                <View onClick={() => setShow(false)}>
                  <MyButton type='default' fillet width={150}>取消</MyButton>
                </View>
                <View>
                  <MyButton fillet width={150} onClick={putParam}>确定</MyButton>
                </View>
              </View>
            </>
            : <Empty name='暂无部门'/>}

        </View>
      </CustomPageContainer>
    </>
  )
}