var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import moment from 'moment';
import YearPicker from './year-picker';
import SelectionBox from './selection-box';

/**
 * Display a bootstrap form control for selection of a month and year
 */
export default class MonthYearPicker extends React.Component {

    constructor(props) {
        super(props);

        this.change = this.change.bind(this);
    }

    change(prop) {
        return val => {
            if (this.props.onChange) {
                const data = Object.assign({}, this.props.value);
                data[prop] = val;
                this.props.onChange(data);
            }
        };
    }

    focus() {
        const refs = this.refs;
        const ctrl = this.props.period ? refs.iniMonth : refs.month;
        ctrl.getDOMNode().focus();
    }

    /**
     * Create the month selector with the list of month names
     */
    monthSelector(props) {
        // create the options
        const options = [];
        let count = 0;
        while (count < 12) {
            options.push({
                id: count + 1,
                name: moment().month(count++).format('MMM')
            });
        }

        const selval = props.value ? options.find(it => it.id === props.value) : null;

        const monthChange = val => {
            if (props.onChange) {
                props.onChange(val !== null ? val.id : null);
            }
        };

        const compProps = Object.assign({}, props, { onChange: monthChange, value: selval });

        return React.createElement(SelectionBox, _extends({ ref: props.ref, options: options,
            optionDisplay: 'name',
            noSelectionLabel: '-'
        }, compProps));
    }

    monthYearCtrl(opts) {
        const val = this.props.value ? this.props.value : {};

        return React.createElement(
            'div',
            null,
            opts.label ? React.createElement(
                'label',
                { className: 'pull-left label-left-ctrl' },
                opts.label
            ) : null,
            React.createElement(
                'div',
                { className: 'pull-left', style: { minWidth: '100px' } },
                this.monthSelector({
                    ref: opts.pmonth,
                    placeHolder: __('datetime.month'),
                    value: val[opts.pmonth],
                    onChange: this.change(opts.pmonth)
                })
            ),
            React.createElement(
                'div',
                { className: 'pull-left', style: { minWidth: '90px' } },
                React.createElement(YearPicker, { onChange: this.change(opts.pyear),
                    value: val[opts.pyear] })
            )
        );
    }

    render() {
        const props = this.props;

        const label = props.label ? React.createElement(
            'label',
            { className: 'control-label' },
            props.label
        ) : null;

        const period = props.period;

        return React.createElement(
            'div',
            { className: 'form-group' },
            label,
            !period && this.monthYearCtrl({
                pmonth: 'month',
                pyear: 'year'
            }),
            period && this.monthYearCtrl({
                pmonth: 'iniMonth',
                pyear: 'iniYear'
            }),
            period && this.monthYearCtrl({
                label: __('period.to') + ':',
                pmonth: 'endMonth',
                pyear: 'endYear'
            })
        );
    }
}

MonthYearPicker.propTypes = {
    value: React.PropTypes.object,
    onChange: React.PropTypes.func,
    label: React.PropTypes.node,
    bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']),
    help: React.PropTypes.string,
    wrapperClassName: React.PropTypes.string,
    // if true, an initial and final month/year controls will be displayed to set a period
    period: React.PropTypes.bool
};