import * as React from 'react';
import { useState, useEffect } from 'react';
import * as moment from 'moment';
import { Moment } from 'moment';
import { Select, DatePicker } from 'antd';
import { FormTypes } from '../../types';

const { RangePicker } = DatePicker;

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i += 1) {
    result.push(i);
  }
  return result;
};

const OPTIONS1 = [
  { label: '今日', value: 'today' },
  { label: '昨日', value: 'yesterday' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '自定义', value: '' },
];
const OPTIONS2 = [
  { label: '最近24小时', value: 1 },
  { label: '最近7日', value: 7 },
  { label: '自定义', value: '' },
];

function DateRangePicker(props: FormTypes.FormItem.FormAtomicSelectProps) {
  const {
    config,
    values,
    validateTrigger,
  } = props;
  const {
    key,
    // start,
    // end,
    // keys,
    isDisabledDate,
    options,
    format,
  } = config;

  const [fastDateRange, updateFastDateRange] = useState<null | string | number>();
  const [customDateRange, updateCustomDateRange] = useState<[Moment, Moment]>();

  const handleFastDateRangeChanage = (value: null | string | number) => {
    updateFastDateRange(value);
    if (value === null) return;
    let startDate: Moment = moment();
    let endDate: Moment = moment();
    if (options === 'options1') {
      if (value === 'today') {
        updateCustomDateRange([moment().startOf('day'), moment().endOf('day')]);
        startDate = moment().startOf('day');
        endDate = moment().endOf('day');
      } else if (value === 'yesterday') {
        updateCustomDateRange([moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]);
        startDate = moment().subtract(1, 'day').startOf('day');
        endDate = moment().subtract(1, 'day').endOf('day');
      } else if (value === 'week') {
        updateCustomDateRange([moment().week(moment().week()).startOf('week'), moment().week(moment().week()).endOf('week')]);
        startDate = moment().week(moment().week()).startOf('week');
        endDate = moment().week(moment().week()).endOf('week');
      } else if (value === 'month') {
        updateCustomDateRange([moment().startOf('month'), moment().endOf('month')]);
        startDate = moment().startOf('month');
        endDate = moment().endOf('month');
      }
    } else if (options === 'options2') {
      updateCustomDateRange([moment().subtract(value, 'day'), moment()]);
      startDate = moment().subtract(value, 'day');
      endDate = moment();
    }
    // eslint-disable-next-line react/destructuring-assignment
    props[validateTrigger]([startDate.format(format), endDate.format(format)]);
  };

  const handleDateRangeChange = (_values: any) => {
    updateCustomDateRange(_values);
    updateFastDateRange(null);
    if (_values) {
      const [startDate, endDate] = _values;
      // eslint-disable-next-line react/destructuring-assignment
      props[validateTrigger]([startDate.format(format), endDate.format(format)]);
    } else {
      // eslint-disable-next-line react/destructuring-assignment
      props[validateTrigger]([]);
    }
  };
  useEffect(() => {
    if (options === 'options1') {
      updateFastDateRange('today');
      updateCustomDateRange([moment().startOf('day'), moment().endOf('day')]);
      // eslint-disable-next-line react/destructuring-assignment
      props[validateTrigger]([moment().startOf('day').format(format), moment().endOf('day').format(format)]);
    } if (options === 'options2') {
      updateFastDateRange(1);
      updateCustomDateRange([moment().subtract(1, 'day'), moment()]);
      // eslint-disable-next-line react/destructuring-assignment
      props[validateTrigger]([moment().subtract(1, 'day').format(format), moment().format(format)]);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const didMountRef = React.useRef(true);

  useEffect(() => {
    // 编辑 回显示
    if (values[key] && didMountRef.current) {
      didMountRef.current = false;
      const [startTime, endTime] = values[key];
      handleDateRangeChange([moment(startTime), moment(endTime)]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [values]);

  const RangePickerProps = {
    disabledDate: (current: any) => current && current < moment().subtract(1, 'day').endOf('day'),
    disabledTime: (date: any) => (
      {
        disabledHours: () => (
          date && moment().date() === date.date() ? range(0, moment().hour()) : []),
        disabledMinutes: (hour: any) => (date
          && moment().date() === date.date()
          && moment().hour() === hour ? range(0, moment().minute()) : []),
        disabledSeconds: (hour: any, minute: any) => (
          date
            && moment().date() === date.date()
            && moment().hour() === hour
            && moment().minute() === minute ? range(0, moment().second()) : []),
      }),
  };

  return (
    <span>
      {options ? (
        <Select
          value={fastDateRange}
          options={options === 'options1' ? OPTIONS1 : OPTIONS2}
          placeholder="请选择"
          onChange={handleFastDateRangeChanage}
          style={{
            width: 100,
          }}
        />
      ) : null}
      <RangePicker
        onChange={handleDateRangeChange}
        value={customDateRange}
        format={format}
        // eslint-disable-next-line react/jsx-props-no-spreading
        {...(isDisabledDate ? RangePickerProps : {})}
        showTime={{
          hideDisabledOptions: true,
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
        }}
        placeholder={['开始时间', '结束时间']}
      />
    </span>
  );
}

export default DateRangePicker;