import React, { PropTypes } from 'react';
import moment from 'moment';
import Datepicker from 'react-datepicker';

const defaultProps = {
  min: moment().subtract(3, 'months'),
  max: moment().add(1, 'years'),
};
const propTypes = {
  onChange: PropTypes.func,
  min: PropTypes.object,
  max: PropTypes.object,
};

class BetweenDatepicker extends React.Component {
  constructor(props) {
    super(props);

    this.state = { from: moment(), to: moment() };
  }

  onChange(bound, value) {
    this.setState({ [bound]: value }, () => {
      const { from, to } = this.state;
      this.props.onChange([from, to]);
    });
  }

  render() {
    const { min, max } = this.props;
    const { from, to } = this.state;

    return (
      <div className={'o-layout'}>
        <div className={'u-1/2 o-layout__item'}>
          <Datepicker
            selected={from}
            onChange={this.onChange.bind(this, 'from')}
            showMonthDropdown
            dropdownMode="select"
            showYearDropdown
            minDate={min}
            maxDate={max}
            scrollableYearDropdown
          />
        </div>
        <div className={'u-1/2 o-layout__item'}>
          <Datepicker
            selected={to}
            onChange={this.onChange.bind(this, 'to')}
            showMonthDropdown
            dropdownMode="select"
            showYearDropdown
            minDate={min}
            maxDate={max}
            scrollableYearDropdown
          />
        </div>
      </div>
    );
  }
}

BetweenDatepicker.defaultProps = defaultProps;
BetweenDatepicker.propTypes = propTypes;

export default BetweenDatepicker;
