import { BfModalCalendar } from '@bud-fe/react-taro-ui';
import { Button, View } from '@tarojs/components';
import React, { useState } from 'react';
import type { Calendar } from 'taro-ui/types/calendar';

export default () => {
  const [isOpened, setIsOpened] = useState(false);
  const [isRangeOpened, setIsRangeOpened] = useState(false);
  const [currentDate, setCurrentDate] = useState(Date.now());
  const [currentDateRange, setCurrentDateRange] = useState<Calendar.SelectedDate>();
  const [dateConfig, setDateConfig] = useState({
    '2023-09-29': { dateType: 1, badgeText: '休', badgeBgColor: '#FD3C42' },
    '2023-09-30': { dateType: 1, badgeBgColor: '#FD3C42' },
    '2023-10-01': { dateType: 3, badgeBgColor: 'orange' },
    '2023-10-02': { dateType: 1, badgeText: '休', badgeBgColor: '#FD3C42' },
    '2023-10-03': { dateType: 2, remark: '09.27' },
    '2023-10-04': { dateType: 3 },
    '2023-10-05': { dateType: 1, badgeText: '休', badgeBgColor: '#FD3C42' },
    // '2023-10-06': { dateType: 1, badgeText: '休', badgeBgColor: 'blue' },
    '2023-10-06': { dateType: 1, badgeText: '休' },
    '2023-10-07': { dateType: 2, badgeBgColor: '#333', remark: '09.29' },
    // '2023-10-08': { dateType: 2, badgeText: '班', badgeBgColor: 'green', remark: '09.30' },
    '2023-10-08': { dateType: 2, badgeText: '班', remark: '09.30' },
    '2023-10-09': { dateType: 3 },
  });
  return (
    <>
      <Button className="group-title" onClick={() => setIsOpened(true)}>
        基础用法
      </Button>

      <BfModalCalendar
        id="1"
        title="请选择"
        isOpened={isOpened}
        position="top"
        cancelText="custom cancelText"
        calendarConfig={{
          currentDate,
          minDate: '2023-10-12',
          maxDate: '2024-11-12',
          requestDateConfig: async () => {
            return Promise.resolve({
              '2023-12-07': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-13': {
                dateType: 2,
                remark: '12.11',
              },
              '2023-12-14': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-15': {
                dateType: 2,
                remark: '2023.12.12',
              },

              '2023-12-21': {
                dateType: 1,
                remark: null,
              },
              '2023-12-22': {
                dateType: 2,
                remark: '2023.12.04',
              },
            });
          },
        }}
        onConfirm={(id, value) => {
          console.log('onConfirm', { id, value });
          setCurrentDate(value as number);
          setIsOpened(false);
        }}
        onCancel={() => {
          console.log('onCancel');
          setIsOpened(false);
        }}
        onClose={() => {
          console.log('onClose');
          setIsOpened(false);
        }}
        slotRight={
          <View
            style={{ color: 'red' }}
            onClick={() => {
              console.log('onSlotRight');
              setIsOpened(false);
            }}
          >
            custom
          </View>
        }
      />

      <Button className="group-title" onClick={() => setIsRangeOpened(true)}>
        基础用法 - 范围选择
      </Button>

      <BfModalCalendar
        id="2"
        isOpened={isRangeOpened}
        position="top"
        title="日期选择"
        subTitle="每逢国定假日，系统将自动更新补班日路线"
        cancelText="重置"
        calendarConfig={{
          isMultiSelect: true,
          currentDate: currentDateRange,
          maxDate: '2024-10-01',
          requestDateConfig: async () => {
            return Promise.resolve({
              '2023-12-10': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-16': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-07': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-13': {
                dateType: 2,
                remark: '12.11',
              },
              '2023-12-14': {
                dateType: 2,
                remark: '2023.12.14',
              },
              '2023-12-15': {
                dateType: 2,
                remark: '2023.12.12',
              },

              '2023-12-21': {
                dateType: 1,
                remark: null,
              },
              '2023-12-22': {
                dateType: 2,
                remark: '2023.12.04',
              },
            });
          },
          // dateConfig,
          // onClickPreMonth: () => {
          //   setDateConfig((pre) => ({
          //     ...pre,
          //     ...{
          //       '2023-10-01': { dateType: 3, badgeText: '工', badgeBgColor: 'pink' },
          //       '2023-10-02': { dateType: 1, badgeText: '休', badgeBgColor: 'purple' },
          //     },
          //   }));
          // },
          // onClickNextMonth: () => {
          //   setDateConfig((pre) => ({
          //     ...pre,
          //     ...{
          //       '2023-10-01': { dateType: 3, badgeText: '工', badgeBgColor: '#FD3C42' },
          //       '2023-10-02': { dateType: 1, badgeText: '休', badgeBgColor: 'blue' },
          //     },
          //   }));
          // },
        }}
        onConfirm={(id, value: Calendar.SelectedDate) => {
          console.log('onConfirm', { id, value });
          setCurrentDateRange(value);
          setIsRangeOpened(false);
        }}
        onCancel={() => {
          console.log('执行重置逻辑');
        }}
        onClose={() => {
          console.log('onClose');
          setIsRangeOpened(false);
        }}
      />
    </>
  );
};