import React, { useState } from 'react';
import {
  DatePicker,Button,Space
} from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
import {formatTime} from '../../utils';

const { RangePicker } = DatePicker;

const DateRangePickerComp = ({ value, onChange, disabled, noEditable }) => {
  const [open, setOpen] = useState(false);
  const [selectCue, setSelectCue] = useState(false);

  const filterEnd = (DateValue) => { 
    if (!DateValue?.end) {
      return '';
    }else { 
      return dayjs(DateValue.end);
    }
  }
  
  const dateFormat = (value) => { 
    const formatVal = value.format('YYYY-MM-DD');
    if (formatVal.includes('2099')) {
      return '永久有效期';
    } else {
      return formatVal;
    }
  }

  return noEditable ? (
    value?.start ? (
      formatTime('YMD', value.start)
    ) : (
      ''
    )
  ) : (
    <RangePicker
      open={open}
      onOpenChange={(state) => setOpen(state)}
      disabled={disabled}
      placeholder={disabled ? ['', ''] : ['簽發(fā)日期', '有效期']}
      value={[value?.start ? dayjs(value.start) : '', filterEnd(value)]}
      onChange={(value) => {
        console.log('改變時間', value);
        setSelectCue(false);
        onChange({
          start: value && value[0] ? formatTime('UTC', value[0]) : '',
          end: value && value[1] ? formatTime('UTC', value[1]) : '',
        });
      }}
      className={styles.datePicker}
      format={dateFormat}
      renderExtraFooter={() => (
        <Space style={{ width: 'calc(100% - 20px)', justifyContent: 'space-between' }}>
          <span style={{ fontSize: '12px', color: 'red', paddingLeft: '20px' }}>{selectCue && '簽發(fā)日期不能為空'}</span>
          <Button
            type="link"
            style={{ color: '#8969c8' }}
            size="small"
            onClick={() => {
              if (!value?.start) {
                setSelectCue(true);
                return;
              }
              onChange({
                start: formatTime('UTC', value.start),
                end: dayjs('2099-12-31'),
              });
              if (value.start) {
                setOpen(false);
              }
            }}
          >
            永久有效期
          </Button>
        </Space>
      )}
    />
  );
};


export default DateRangePickerComp;