// @flow
import React from 'react';
import $ from 'jquery';
import './jquery.daterangepicker';
import moment from 'moment';

// import './scss/daterangepicker.scss';

/** Props, передаваемые в DateRangePicker
  * @property {object} options - опции для доп. настройки, описание есть по ссылке
  *    https://longbill.github.io/jquery-date-range-picker/#configuration
  * @property {Function} onChange - коллбэк принимающий объект с результатом выбора.
  *    Объект следующей структуры:
  *  {
  *    date1: (Date object of the earlier date),
  *    date2: (Date object of the later date),
  *    value: "2013-06-05 to 2013-06-07"
  *  }
  * @property {Object} value - дефолтные даты, отображающиеся при загрузке компонента.
  * передаются в формате { start: any, end: any }, start и end могут быть строкой, timestamp
  * или объектом moment.
*/
type DateRangePickerProps = {
  options?: { [string]: any },
  onChange: Function,
  value: { start: any, end: any },
};
type DateRangePickerState = {
  options: { [string]: any },
  value: { start: any, end: any },
};

/** Компонент DateRangePicker - рисует 2 календаря и дает возможность выбора диапазона дат */
export default class DateRangePicker extends React.Component<DateRangePickerProps, DateRangePickerState> {
  static defaultProps = {
    onChange: () => null,
  }

  constructor(props: DateRangePickerProps) {
    super(props);
    this.defaultOptions = {
      autoClose: true,
      format: 'DD.MM.YYYY',
      language: 'ru',
      separator: ' - ',
      showShortcuts: false,
      showTopbar: false,
      stickyMonths: true,
      startOfWeek: 'monday',
    };
    this.state = {
      options: { ...this.defaultOptions, ...props.options },
    };
  }

  defaultOptions: Object

  dateRangeRef: ?HTMLElement

  componentDidMount() {
    this.setState({ value: this.getValue() });
    $(this.dateRangeRef).dateRangePicker(this.state.options)
      .bind('datepicker-change', (event, result: Object) => {
        this.props.onChange(result);
      });
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.value && (this.props.value !== prevProps.value)) {
      this.setState({ value: this.getValue() });
    }
    if (this.props.options !== prevProps.options) {
      this.setState({ options: { ...this.defaultOptions, ...this.props.options } });
    }
    /* if (this.state.options !== prevState.options) {
      $(this.dateRangeRef).data('dateRangePicker').destroy();
      $(this.dateRangeRef).dateRangePicker(this.state.options)
        .bind('datepicker-change', (event, result: Object) => {
          this.props.onChange(result);
        });
    } */
  }

  componentWillUnmount() {
    $(this.dateRangeRef).data('dateRangePicker').destroy();
  }

  getDate(date: any) {
    const type = typeof (date);

    switch (type) {
      case 'string':
        return date;

      case 'number':
        return moment(date, 'X').format(this.state.options.format);

      case 'object':
        if (moment.isMoment(date)) {
          return moment(date).format(this.state.options.format);
        }
        break;

      default:
        return '';
    }
  }

  getValue() {
    if (this.props.value && this.props.value.start && this.props.value.end){

      let start = this.getDate(this.props.value.start),
          end = this.getDate(this.props.value.end);

      return `${start}${this.state.options.separator}${end}`;
    }
    return '';
  }

  render() {
    const { value } = this.state;
    // eslint-disable-next-line no-return-assign 
    return <input className='omni-ui-general omni-date-range-picker' onChange={() => null} value={value || ''} ref={ref => this.dateRangeRef = ref}/>;
  }
}