import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, DatePicker } from 'antd'
import A2xuZhi from '../A2orderSet/A2xuZhi'
import A2template from '../A2orderSet/A2template'
import dayjs, { Dayjs } from 'dayjs'
import { useDispatch, useSelector } from 'react-redux'
import { A2N_APIgetList } from '@/store/action/A2orderSetNew'
import { RootState } from '@/store'
import { A2NlistType } from './type'
import MyTable from '@/components/MyTable'
import A2Ncan from './A2Ncan'
import A2Nperiod from './A2Nperiod'

const week = ['日', '一', '二', '三', '四', '五', '六']

function A2orderSet() {
  // 11:预约须知
  const [configId, setConfigId] = useState(0)

  //   预约单模板设置
  const [template, setTemplate] = useState(false)

  // 选择年月
  const [topTime, setTopTime] = useState(dayjs().format('YYYY-MM'))

  // 不可选中这个月之前的日期
  const disabledDate = (current: Dayjs) => {
    // 获取当前月份的第一天（如2025-04-01）
    const startOfCurrentMonth = dayjs().startOf('month')
    // 禁用所有早于当前月份的日期
    return current.isBefore(startOfCurrentMonth, 'month')
  }

  // 获取列表
  const dispatch = useDispatch()

  const getListFu = useCallback(() => {
    dispatch(A2N_APIgetList(topTime, true))
  }, [dispatch, topTime])

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

  const list = useSelector((state: RootState) => state.A2orderSetNew.list)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '可预约日期',
        width: 260,
        render: (item: A2NlistType) => `${item.date} 星期${week[dayjs(item.date).day()]}`
      },
      {
        title: '可预约时段',
        render: (item: A2NlistType) => {
          if (item.times && item.times.length) {
            return item.times.map(v => `${v.timeStart} - ${v.timeEnd}`).join('，')
          } else return '未设置'
        }
      },
      {
        title: '操作',
        width: 260,
        render: (item: A2NlistType) => (
          <>
            <Button size='small' type='text' onClick={() => setPeriodInfo(item)}>
              设置可预约时段
            </Button>
          </>
        )
      }
    ]
  }, [])

  // 设置可预约日期
  const [timeCan, setTimeCan] = useState(false)

  // 设置可预约时段
  const [periodInfo, setPeriodInfo] = useState({} as A2NlistType)

  return (
    <div className={styles.A2orderSet}>
      <div className='pageTitle'>课程预约设置</div>

      <div className='A2top'>
        <div>
          选择年月：
          <DatePicker
            value={topTime ? dayjs(topTime) : undefined}
            onChange={e => setTopTime(e ? dayjs(e).format('YYYY-MM') : '')}
            picker='month'
            allowClear={true}
            disabledDate={disabledDate}
            placeholder='请选择年月'
          />
        </div>
        <div>
          <Button type='primary' onClick={() => setConfigId(11)}>
            预约须知设置
          </Button>
          &emsp;
          <Button type='primary' onClick={() => setTemplate(true)}>
            预约单模板设置
          </Button>
          &emsp;
          <Button type='primary' onClick={() => setTimeCan(true)}>
            可预约日期设置
          </Button>
        </div>
      </div>

      {/* 表格 */}
      <MyTable
        yHeight={690}
        list={list}
        pagingInfo={false}
        columnsTemp={[]}
        lastBtn={tableLastBtn}
      />

      {/*预约须知 */}
      {configId ? (
        <A2xuZhi
          setSrc='cms/book/config/edit'
          getSrc='cms/book/config/get'
          sId={configId as 11}
          closeFu={() => setConfigId(0)}
        />
      ) : null}

      {/*预约单模板设置 */}
      {template ? (
        <A2template closeFu={() => setTemplate(false)} type='课程预约' />
      ) : null}

      {/* 可预约日期设置 */}
      {timeCan ? <A2Ncan succFU={getListFu} closeFu={() => setTimeCan(false)} /> : null}

      {/* 可预约时段设置 */}
      {periodInfo.id ? (
        <A2Nperiod
          closeFu={() => setPeriodInfo({} as A2NlistType)}
          succFu={getListFu}
          info={periodInfo}
        />
      ) : null}
    </div>
  )
}

const MemoA2orderSet = React.memo(A2orderSet)

export default MemoA2orderSet
