import React, { Component } from 'react';
import './index.less';
import { DatePicker } from 'antd';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { key: 0 };
    this.loading = false;
  }

  dateRender(date) {
    const { dateRender, checkRefresh } = this.props;
    if (!this.loading && checkRefresh) {
      if (checkRefresh(date, () => this.needRefresh())) {
        this.loading = true;
      }
    }
    if (dateRender) return dateRender(date);
    return <div className="ant-calendar-date">{date.get('date')}</div>;
  }

  needRefresh() {
    this.setState({ key: this.state.key + 1 });
    this.loading = false;
    setTimeout(() => {
      this.setState({ key: this.state.key + 1 });
    }, 1);
  }

  render() {
    const { show, hideInput, disabledDate, theme = '', value, onChange } = this.props;
    return (
      <div
        ref={ref => {
          if (!this.ref) {
            this.ref = ref;
            this.setState({ load: false });
          }
        }}
        className={`g-date-block ${hideInput ? 'hide-input' : ''}`}
      >
        <DatePicker
          open={show && this.ref}
          value={value}
          getCalendarContainer={() => this.ref.parentNode}
          dropdownClassName={`g-date ${theme} ${hideInput ? 'hide-input' : ''}`}
          disabledDate={disabledDate}
          dateRender={date => this.dateRender(date)}
          onChange={date => onChange(date)}
        />
      </div>
    );
  }
}