import moment from 'moment';
import React, { Component } from 'react';
import { range } from '../utils/helpers.jsx';
import { reduxForm } from 'redux-form';

const currentYear = parseInt(moment().format('YYYY'), 10);
const currentMonth = parseInt(moment().format('M'), 10);

class PeriodSelector extends Component {
  /**
   */
  handleChange(field, e) {
    let { refreshBtn } = this.refs;
    field.onChange(e);
    setTimeout(() => refreshBtn.click());
  }

  /**
   * Render method
   */
  render() {
    const {
      fields: {
        month, year
      },
      handleSubmit,
      onRefresh,
      future
    } = this.props;

    let months = [
      'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli',
      'augustus', 'september', 'oktober', 'november', 'december'
    ];

    let inHistory = 3;
    let inFuture = !future ? 1 : 3;
    let refresh = onRefresh.bind(this);

    return (<div>
        <form onSubmit={handleSubmit(refresh)}>
          <label className="periodTitle">Periode</label>
          <select {...month} onChange={this.handleChange.bind(this, month)}>
            <option value={''}>Kies maand</option>
            <option value={''}>---</option>
            {months.map((v, i) => {
              let monthNumber = i + 1;
              return (<option key={i} value={monthNumber}>{v}</option>);
            })}
          </select>
          <select {...year} onChange={this.handleChange.bind(this, year)}>
            <option value={''}>Kies jaar</option>
            <option value={''}>---</option>
            {[...range(currentYear - inHistory, currentYear)].map((v) => {
              return (<option key={v} value={v}>{v}</option>);
            })}
            {[...range(currentYear, currentYear + inFuture)].map((v) => {
              return (<option key={v} value={v}>{v}</option>);
            })}
          </select>
          <button ref="refreshBtn">Vernieuwen</button>
        </form>
      </div>);
  }
}

/**
 * Proptypes
 */
PeriodSelector.propTypes = {
  future: React.PropTypes.bool,
  onRefresh: React.PropTypes.func.isRequired,
};

PeriodSelector = reduxForm({
  form: 'periodSelector',
  fields: ['month', 'year']
},
(state) => { // mapStateToProps
  return {
    initialValues: {
      month: currentMonth,
      year: currentYear
    }
  };
})(PeriodSelector);

export default PeriodSelector;