import React from 'react';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar';
import classNames from 'classnames';
import Icon from '../icon';

export default function createPicker(TheCalendar) {
  return class CalenderWrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
      };
    }

    // 当传入新的props的时候触发
    componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.parseDateFromValue(nextProps.value),
        });
      }
    }

    clearSelection = (e) => {
      e.preventDefault();
      e.stopPropagation();
      this.setState({ value: null });
      this.handleChange(null);
    }

    handleChange = (value) => {
      const props = this.props;
      if (!('value' in props)) {
        this.setState({ value });
      }
      const timeValue = value ? new Date(value.getTime()) : null;
      props.onChange(timeValue, value ? props.getFormatter().format(value) : '');
    }

    render() {
      const props = this.props;
      const locale = props.locale;
      // 以下两行代码
      // 给没有初始值的日期选择框提供本地化信息
      // 否则会以周日开始排
      let defaultCalendarValue = new GregorianCalendar(locale);
      defaultCalendarValue.setTime(Date.now());

      const placeholder = ('placeholder' in props)
        ? props.placeholder : locale.lang.placeholder;

      const disabledTime = props.showTime ? props.disabledTime : null;

      const calendarClassName = classNames({
        'idoll-calendar-time': props.showTime,
        'idoll-calendar-month': MonthCalendar === TheCalendar,
      });

      // 需要选择时间时，点击 ok 时才触发 onChange
      let pickerChangeHandler = {
        onChange: this.handleChange,
      };
      let calendarHandler = {
        onOk: this.handleChange,
        // fix https://github.com/ant-design/ant-design/issues/1902
        onSelect: (value, cause) => {
          if (cause && cause.source === 'todayButton') {
            this.handleChange(value);
          }
        },
      };
      if (props.showTime) {
        pickerChangeHandler = {};
      } else {
        calendarHandler = {};
      }

      const calendar = (
        <TheCalendar
          formatter={props.getFormatter()}
          disabledDate={props.disabledDate}
          disabledTime={disabledTime}
          locale={locale.lang}
          timePicker={props.timePicker}
          defaultValue={defaultCalendarValue}
          dateInputPlaceholder={placeholder}
          prefixCls='idoll-calendar'
          className={calendarClassName}
          onOk={props.onOk}
          {...calendarHandler}
        />
      );

      // 默认时间选择框的宽度
      const pickerStyle = {};
      if (props.showTime) {
        pickerStyle.width = 180;
      }

      const clearIcon = (!props.disabled && this.state.value)
        ? <Icon type='close-circle'
          className='idoll-calendar-picker-clear '
          onClick={this.clearSelection}
        /> : null;
        return (
          <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
            <RcDatePicker
              transitionName={props.transitionName}
              disabled={props.disabled}
              calendar={calendar}
              value={this.state.value}
              prefixCls='idoll-calendar-picker-container'
              style={props.popupStyle}
              align={props.align}
              getCalendarContainer={props.getCalendarContainer}
              open={props.open}
              onOpen={props.toggleOpen}
              onClose={props.toggleOpen}
              {...pickerChangeHandler}
            >
              {
                ({ value }) => {
                  return (
                    <span>
                      <input
                        disabled={props.disabled}
                        readOnly
                        value={value ? props.getFormatter().format(value) : ''}
                        placeholder={placeholder}
                        className={props.pickerInputClass}
                      />
                      {clearIcon}
                      <span className='idoll-calendar-picker-icon' />
                    </span>
                  );
                }
              }
            </RcDatePicker>
          </span>
      )
    }
  }
}