import React, { useState } from 'react';
import dayjs from 'dayjs';
import { Button, Calendar, Popup, Space } from 'antd-mobile';

type CalendarProps = {
  name?: string;
  label?: string;
  onPageChange?: (year: number, month: number) => void;
  weekStartsOn?: 'Monday' | 'Sunday';
  renderLabel?: (date: Date) => string | null | undefined;
  allowClear?: boolean;
  value?: [Date, Date] | null;
  defaultValue?: [Date, Date] | null;
  onChange?: (value: [Date, Date] | null) => void;
};
export const XCalendar: React.FC<CalendarProps> = (props) => {
  const value = props.value;
  const onChange = props.onChange;
  const defaultValue = props.defaultValue || null;
  const [val, setVal] = useState<[Date, Date] | null>(defaultValue);
  const [visible, setVisible] = useState(false);
  return (
    <>
      <div
        onClick={() => {
          setVisible(true);
        }}
        style={{ color: value ? '' : '#b2b2b2' }}
      >
        {value
          ? dayjs(value[0]).format('YYYY-MM-DD') +
            ' ~ ' +
            dayjs(value[1]).format('YYYY-MM-DD')
          : '请选择' + props.label}
      </div>
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false);
          onChange?.(val);
        }}
        position="bottom"
        // bodyStyle={{ height: '70vh' }}
      >
        <Space direction="vertical">
          <div className={'xfrom-sapce-vertical'}>
            <Button fill="none">
              {val
                ? dayjs(val[0]).format('YYYY-MM-DD') +
                  ' ~ ' +
                  dayjs(val[1]).format('YYYY-MM-DD')
                : ''}
            </Button>
            <Button
              style={{ float: 'right' }}
              onClick={() => {
                setVisible(false);
                onChange?.(val);
              }}
              color="primary"
              fill="none"
            >
              确认
            </Button>
          </div>
          <Calendar
            selectionMode="range"
            value={val}
            onChange={(val) => {
              setVal(val);
            }}
          ></Calendar>
        </Space>
      </Popup>
    </>
  );
};
export default XCalendar