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

import HourSelect from './HourSelect';
import { isDate, isBetweenMinAndMax, dateHasErrors } from '../../utils/validations.js';
import { HOUR_FORMAT } from './hourOptions';

const defaultProps = {
  min: moment().subtract(3, 'months'),
  max: moment().add(1, 'years'),
  from: moment(),
  to: moment(),
  showMinTime: false,
  showMaxTime: false,
};

const propTypes = {
  onChange: PropTypes.func,
  min: PropTypes.object,
  max: PropTypes.object,
  from: PropTypes.object,
  to: PropTypes.object,
  showMinTime: PropTypes.bool,
  showMaxTime: PropTypes.bool,
};

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

    this.onHourChange = this.onHourChange.bind(this);

    this.state = {
      from: this.props.from,
      to: this.props.to,
    };
  }

  onChange(bound, value) {
    const { from, to } = this.state;
    if (dateHasErrors(value, this.props.min, this.props.max)) {
      this.setState({ [bound]: null });
    } else {
      this.setState({ [bound]: value });
    }
    if (bound === 'from') {
      this.props.onChange([value, to]);
    } else {
      this.props.onChange([from, value]);
    }
  }

  onHourChange(input) {
    return (hourString) => {
      if (hourString) {
        const { from, to } = this.state;
        const involvedDate = input === 'from' ? from : to;
        const hour = moment(hourString, HOUR_FORMAT).hour();
        involvedDate.hour(hour);

        this.props.onChange([from, to]);
      }
    };
  }

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

    const fromHour = from ? from.format(HOUR_FORMAT) : null;
    const toHour = to ? to.format(HOUR_FORMAT) : null;
    return (
      <div className="o-layout">
        <div className="u-1/2 o-layout__item">
          <div className="o-layout">
            <div
              className={
                classNames(
                  'o-layout__item',
                  {
                    'u-3/4': this.props.showMinTime,
                    'u-1/1': !this.props.showMinTime,
                  }
                )
              }
            >
              <Datepicker
                className="c-kd__input"
                selected={from}
                onChange={this.onChange.bind(this, 'from')}
                showMonthDropdown
                dropdownMode="select"
                showYearDropdown
                scrollableYearDropdown
                minDate={min}
                maxDate={max}
                placeholderText='MM/DD/YYYY'
              />
            </div>
            {
              (() => {
                if (this.props.showMinTime) {
                  return (
                    <div className="u-1/4 o-layout__item">
                      <HourSelect
                        onChange={this.onHourChange('from')}
                        selected={fromHour}
                      />
                    </div>
                  );
                }

                return null;
              })()
            }
          </div>
        </div>
        <div className="u-1/2 o-layout__item">
          <div className="o-layout">
            <div
              className={
                classNames(
                  'o-layout__item',
                  {
                    'u-3/4': this.props.showMaxTime,
                    'u-1/1': !this.props.showMaxTime,
                  }
                )
              }
            >
              <Datepicker
                className="c-kd__input"
                selected={to}
                onChange={this.onChange.bind(this, 'to')}
                showMonthDropdown
                dropdownMode="select"
                showYearDropdown
                scrollableYearDropdown
                minDate={min}
                maxDate={max}
                placeholderText='MM/DD/YYYY'
              />
            </div>
            {
              (() => {
                if (this.props.showMaxTime) {
                  return (
                    <div className="u-1/4 o-layout__item">
                      <HourSelect
                        onChange={this.onHourChange('to')}
                        selected={toHour}
                      />
                    </div>
                  );
                }

                return null;
              })()
            }
          </div>
        </div>
      </div>
    );
  }
}

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

export default BetweenDatepicker;
