import React, { useCallback, 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[]) => void
  baseTime: string
  num: 20 | 50
}

function C1NoTime({ baseTime, closeFu, editFu, num }: Props) {
  const baseTimeArr = baseTime
    ? baseTime
        .split(',')
        .map(v => v.replaceAll('年', '-').replaceAll('月', '-').replaceAll('日', ''))
    : []
  const [value, setValue] = useState<string[]>(baseTimeArr)

  const onChange = useCallback(
    (date: any, dateString: string[] | string) => {
      if (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([])
    },
    [num]
  )

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

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

  return (
    <Modal
      wrapClassName={styles.C1Notime}
      open={true}
      title='不可预约日期'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='C1NoTit'>请选择日期，最多{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='C1Nbtn'>
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        &emsp;
        <Button type='primary' onClick={() => editFu(value)}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

const MemoC1NoTime = React.memo(C1NoTime)

export default MemoC1NoTime
