/** @format */

import { DatePicker } from 'antd';
import _ from 'lodash';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

import { DispatchEvent } from '../../../utils';
import { AttrType } from './data';
import { Container } from './styled';

const EVENT_Timer_Date_Select = 'event-timer-date-select';

const TimePicker = (props: AttrType) => {
  const {
    size,
    formate,
    border,
    borderHover,
    borderActive,
    ordinary,
    select,
    id,
  } = props;

  const dateFormat = formate.picker === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD';
  const [value, setValue] = useState('');

  useEffect(() => {
    setValue(formate.defaultTime);
  }, [formate.defaultTime]);

  function onChange(date: any, dateString: string) {
    setValue(dateString);
    DispatchEvent(id, EVENT_Timer_Date_Select, {
      value: dateString,
    });
  }

  function disabledDate(current: any) {
    if (!formate.startTime && !formate.endTime) {
      return '';
    }
    if (!formate.endTime) {
      return current && current < moment(formate.startTime);
    }
    if (!formate.startTime) {
      return current && current > moment(formate.endTime);
    }

    return (
      current &&
      (current < moment(formate.startTime) || current > moment(formate.endTime))
    );
  }

  const userDefinedProps = {
    value: value ? moment(value, dateFormat) : '',
    format: dateFormat,
    disabled: false,
    picker: formate.picker,
    placeholder:
      (ordinary && ordinary.placeholder && ordinary.placeholder) ||
      '请选择日期',
    className: 'start_timerBox',
    bordered: true,
    disabledDate,
  };

  return (
    <Container
      borderActive={borderActive}
      borderHover={borderHover}
      border={border}
      ordinary={ordinary}
      select={select}
      size={size}
      formate={formate}
      id={id}
    >
      <DatePicker
        {...userDefinedProps}
        style={size}
        onChange={onChange}
        getPopupContainer={trigger => trigger.parentElement || document.body}
      />
    </Container>
  );
};

export default TimePicker;