import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, DatePicker, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import dayjs from 'dayjs'
import { MessageFu } from '@/utils/message'

type Props = {
  closeFu: () => void
  editFu: (val: string[] | null) => void
  baseTime: string
  num: 20 | 50
}

function A2NoTime({ baseTime, closeFu, editFu, num }: Props) {
  const [value, setValue] = useState<null | string[]>(null)

  useEffect(() => {
    if (baseTime && baseTime !== '空') {
      let txt = baseTime.replaceAll('年', '-').replaceAll('月', '-').replaceAll('日', '')
      setValue(txt.split(','))
    }
  }, [baseTime])

  const onChange = useCallback(
    (date: any, dateString: any) => {
      if (date && dateString.length) {
        let arr = dateString as string[]
        if (arr.length > num) {
          arr = arr.filter((c, i) => i < num)
          MessageFu.warning(`最多${num}个日期，已过滤超出日期`)
        }
        setValue(
          arr.map(v => v.replaceAll('年', '-').replaceAll('月', '-').replaceAll('日', ''))
        )
      } else setValue(null)
    },
    [num]
  )

  // const disabledDate = useCallback((time: any) => {
  //   return dayjs().year() !== time.year()
  // }, [])

  // const [checkTime, setCheckTime] = useState(dayjs())

  return (
    <Modal
      wrapClassName={styles.A2Notime}
      open={true}
      title='不可预约日期'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A2NoTit'>请选择日期，最多{num}个</div>
      <DatePicker
        multiple
        onChange={onChange}
        maxTagCount='responsive'
        value={value ? value.map(v => dayjs(v)) : []}
        size='large'
        // allowClear={false}
        format='YYYY年MM月DD日'
        // disabledDate={disabledDate}
        // needConfirm={true}
        // pickerValue={checkTime}
        // onPanelChange={a => {
        //   // 只能选择今年的月份
        //   if (dayjs(a).year() === dayjs().year()) setCheckTime(a)
        // }}
      />

      <div className='A2Nbtn'>
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        &emsp;
        <Button type='primary' onClick={() => editFu(value)}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

const MemoA2NoTime = React.memo(A2NoTime)

export default MemoA2NoTime
