import React, { useState, useEffect, useRef } from 'react';
import { DatePicker as Picker } from 'antd';
import moment from 'moment';
import type { Moment } from 'moment';
import './style.less';

interface searchParams<T> {
  trid?: number | undefined;
  date?: Array<T>
}
const DatePicker: any = Picker;
const { RangePicker } = DatePicker;
type RangeValue = [Moment | undefined, Moment | undefined];

function PlayBackPicker(props: any) {
  const { handelDate } = props;

  const startTime = moment(new Date()).startOf('days').valueOf();
  const endTime = moment(new Date()).endOf('days').valueOf();
  const date = useRef<Array<number | null>>([startTime, endTime]);
  const [dateFlag, setDateFlag] = useState<RangeValue>([moment(new Date()).startOf('days'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss').endOf('days')]);
  const [flag, setFlag] = useState<boolean>(true);

  useEffect(() => {
    handelDate(date.current);
  }, []);

  /**
   * @description: 年月日时间选择
   * @param {*}
   * @return {*}
   */
  const disabledDate = (current: Moment) => {
    if (flag) {
      //禁用当天之后的时间    
      return current > moment().endOf('day');
    }
    //限制选择开始时间后的取值范围
    const startHour = dateFlag[0] && dateFlag[0].hour();
    const startMinute = dateFlag[0] && dateFlag[0].minute();
    const startSecond = dateFlag[0] && dateFlag[0].second();
    const beforeDate = dateFlag[0] && (current > moment().endOf('day') || moment(current).set({ 'hour': startHour, 'minute': startMinute, "second": startSecond }).diff(dateFlag[0], 'days') > 1);
    //限制选择结束时间后的取值范围
    const afterHour = dateFlag[1] && dateFlag[1].hour();
    const afterMinute = dateFlag[1] && dateFlag[1].minute();
    const afterSecond = dateFlag[1] && dateFlag[1].second();
    const afterDate = dateFlag[1] && dateFlag[1].diff(moment(current).set({ 'hour': afterHour, 'minute': afterMinute, "second": afterSecond }), 'days') > 1;
    return !!beforeDate || !!afterDate;
  };

  /**
   * @description: 日期时分秒时间范围
   * @param {any} date
   * @param {any} type
   * @return {*}
   */
  const disabledTracksTime = (date: any, type: any) => {
    if (!date) return;
    const { _d: checkDate, _i: nowDate } = date;
    const checkYear = moment(checkDate).format('YYYY-MM-DD');
    const nowYear = moment(nowDate).format('YYYY-MM-DD');
    const checkHours = moment(checkDate).format('HH');
    const nowHours = moment(nowDate).format('HH');

    // if (type === 'start') {
    //     const hour = moment(date).hour();
    //     const minute = moment(date).minute();
    //     const second = moment(date).second();
    //     return {
    //         disabledHours: () => {
    //             const disabledArr = timeArr(24).splice(hour + 1, timeArr(24).length - hour - 1);
    //             console.log('disabledArr1', disabledArr);
    //             return disabledArr;
    //         },
    //         disabledMinutes: () => {
    //             const disabledArr = timeArr(60).splice(minute, timeArr(60).length - minute);
    //             console.log('disabledArr2', disabledArr);

    //             return disabledArr;
    //         },
    //         disabledSeconds: () => {
    //             const disabledArr = timeArr(60).splice(second, timeArr(60).length - second);
    //             console.log('disabledArr3', disabledArr);

    //             return disabledArr;
    //         },
    //     };
    // }

    const nowHour = moment(nowDate).hour();
    const nowMinute = moment(nowDate).minute();
    const nowSecond = moment(nowDate).second();
    const resultLimit = {
      // type: 'end',
      disabledHours: () => {
        const disabledArr = timeArr(24).splice(nowHour + 1, timeArr(24).length - nowHour);
        return disabledArr;
      },
      disabledMinutes: () => {
        const disabledArr = timeArr(60).splice(nowMinute, timeArr(60).length - nowMinute);
        return disabledArr;
      },
      disabledSeconds: () => {
        const disabledArr = timeArr(60).splice(nowSecond, timeArr(60).length - nowSecond);
        return disabledArr;
      },
    };
    if (checkYear === nowYear && checkHours !== nowHours) {
      return { disabledHours: resultLimit.disabledHours };
    }
    if (checkYear === nowYear && checkHours === nowHours) {
      return resultLimit;
    }
  };
  /**
   * @description: 时分秒时间数组
   * @param {number} length
   * @return {*}
   */
  const timeArr = (length: number): Array<number> => {
    const arr = Array.from(Array(length), (value, index) => index);
    return arr;
  };
  const onOpenChange = (type: boolean) => {
    if (type) {
      setDateFlag([undefined, undefined]);
      if (date.current[0] !== null && date.current[1] !== null) {
        date.current = [null, null];
        handelDate([null, null]);
      }
    } else {
      setFlag(true);
    }
  };
  return (
    <div>

      <RangePicker
        format="YYYY-MM-DD HH:mm:ss"
        allowClear={false}
        value={dateFlag}
        showTime={{
          hideDisabledOptions: true,
        }}
        disabledDate={disabledDate}
        disabledTime={disabledTracksTime}
        // max={disabledTracksTime}
        onCalendarChange={
          (value: any) => {
            setDateFlag(value);
            setFlag(false);
          }
        }
        onOpenChange={onOpenChange}
        onChange={(dateVal: Object, dateString: Array<string>) => {
          const dateTimestamp = dateString.map(item => {
            return moment(item).valueOf();
          });
          date.current = dateTimestamp;
          handelDate(dateTimestamp);
        }}
        onOk={
          (val: any) => {
            console.log('val', val);
          }
        }
      />
    </div>
  );
}
export default PlayBackPicker;