import {FC, useCallback, useEffect, useState} from "react";
import {Image, Input, Radio, Text, 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 screen from '@/static/img/screen.png'

interface Props {
  param: CourseAllParam
  setParam: (data: CourseAllParam) => void
}

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

  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 onClick={() => setShow(true)}>
          <Text>筛选</Text>
          <Image src={screen}
                 mode='aspectFit'
                 style={{
                   display: 'inline-block',
                   width: '15px',
                   height: '15px',
                   verticalAlign: 'middle',
                   marginLeft: '5px'
                 }}/>
        </View>
      </View>

      {param.dep_id > 0 && <View className='mt-2'>{deps.find(d => d.id === param.dep_id)?.name}：</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>
    </>
  )
}