'use strict';

var React = require('react'),
  createClass = require('create-react-class'),
  onClickOutside = require('react-onclickoutside').default;

var DateTimePickerMonths = onClickOutside(
  createClass({
    render: function() {
      return React.createElement('div', { className: 'rdtMonths' }, [
        React.createElement(
          'table',
          { key: 'a' },
          React.createElement(
            'thead',
            {},
            React.createElement('tr', {}, [
              React.createElement(
                'th',
                {
                  key: 'prev',
                  className: 'rdtPrev',
                  onClick: this.props.subtractTime(1, 'years')
                },
                React.createElement('span', {}, '‹')
              ),
              React.createElement(
                'th',
                {
                  key: 'year',
                  className: 'rdtSwitch',
                  onClick: this.props.showView('years'),
                  colSpan: 2,
                  'data-value': this.props.viewDate.year()
                },
                this.props.viewDate.year()
              ),
              React.createElement(
                'th',
                {
                  key: 'next',
                  className: 'rdtNext',
                  onClick: this.props.addTime(1, 'years')
                },
                React.createElement('span', {}, '›')
              )
            ])
          )
        ),
        React.createElement(
          'table',
          { key: 'months' },
          React.createElement('tbody', { key: 'b' }, this.renderMonths())
        )
      ]);
    },

    renderMonths: function() {
      var date = this.props.selectedDate,
        month = this.props.viewDate.month(),
        year = this.props.viewDate.year(),
        rows = [],
        i = 0,
        months = [],
        renderer = this.props.renderMonth || this.renderMonth,
        isValid = this.props.isValidDate || this.alwaysValidDate,
        classes,
        props,
        currentMonth,
        isDisabled,
        noOfDaysInMonth,
        daysInMonth,
        validDay,
        // Date is irrelevant because we're only interested in month
        irrelevantDate = 1;

      while (i < 12) {
        classes = 'rdtMonth';
        currentMonth = this.props.viewDate
          .clone()
          .set({ year: year, month: i, date: irrelevantDate });

        noOfDaysInMonth = currentMonth.endOf('month').format('D');
        daysInMonth = Array.from({ length: noOfDaysInMonth }, function(e, i) {
          return i + 1;
        });

        validDay = daysInMonth.find(function(d) {
          var day = currentMonth.clone().set('date', d);
          return isValid(day);
        });

        isDisabled = validDay === undefined;

        if (isDisabled) classes += ' rdtDisabled';

        if (date && i === date.month() && year === date.year())
          classes += ' rdtActive';

        props = {
          key: i,
          'data-value': i,
          className: classes
        };

        if (!isDisabled)
          props.onClick =
            this.props.updateOn === 'months'
              ? this.updateSelectedMonth
              : this.props.setDate('month');

        months.push(renderer(props, i, year, date && date.clone()));

        if (months.length === 4) {
          rows.push(
            React.createElement(
              'tr',
              { key: month + '_' + rows.length },
              months
            )
          );
          months = [];
        }

        i++;
      }

      return rows;
    },

    updateSelectedMonth: function(event) {
      this.props.updateSelectedDate(event);
    },

    renderMonth: function(props, month) {
      var localMoment = this.props.viewDate;
      var monthStr = localMoment
        .localeData()
        .monthsShort(localMoment.month(month));
      var strLength = 3;
      // Because some months are up to 5 characters long, we want to
      // use a fixed string length for consistency
      var monthStrFixedLength = monthStr.substring(0, strLength);
      return React.createElement('td', props, capitalize(monthStrFixedLength));
    },

    alwaysValidDate: function() {
      return 1;
    },

    handleClickOutside: function() {
      this.props.handleClickOutside();
    }
  })
);

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = DateTimePickerMonths;