import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import {getSiblingYearList} from './datePickerHelpers';

export class MonthYearDropDown extends React.PureComponent<any> {
    static propTypes = {
        month: PropTypes.oneOfType([PropTypes.number, PropTypes.object]).isRequired,
        onMonthSelect: PropTypes.func.isRequired,
        onYearSelect: PropTypes.func.isRequired,
        monthAriaLabel: PropTypes.string.isRequired,
        yearAriaLabel: PropTypes.string.isRequired,
        yearsBeforeCurrent: PropTypes.number.isRequired,
        yearsAfterCurrent: PropTypes.number.isRequired
    };

    handleChangeMonth = ({target: {value}}) => {
        const {month, onMonthSelect} = this.props;
        onMonthSelect(month, value);
    };

    handleChangeYear = ({target: {value}}) => {
        const {month, onYearSelect} = this.props;
        onYearSelect(month, value);
    };

    handleStopPropagation = e => e.stopPropagation();

    render() {
        const {
            month,
            monthAriaLabel,
            yearAriaLabel,
            yearsAfterCurrent,
            yearsBeforeCurrent
        } = this.props;
        const yearList = getSiblingYearList(moment().year(), yearsBeforeCurrent, yearsAfterCurrent);

        return (
            <div
                data-test-automation-id="monthYearDropDown"
                className="rc-month-year-dropdown-wrapper"
                onKeyDown={this.handleStopPropagation}
                onClick={this.handleStopPropagation}
                onMouseUp={this.handleStopPropagation}
                onKeyUp={this.handleStopPropagation}>
                <select
                    data-test-automation-id="monthDropDown"
                    autoFocus
                    className="month-dropdown form-control"
                    value={month.month()}
                    aria-label={monthAriaLabel}
                    onChange={this.handleChangeMonth}>
                    {moment.months().map((label, value) => (
                        <option key={value} value={value}>
                            {label}
                        </option>
                    ))}
                </select>
                <select
                    data-test-automation-id="yearDropDown"
                    className="year-dropdown form-control"
                    value={month.year()}
                    onChange={this.handleChangeYear}
                    aria-label={yearAriaLabel}>
                    {yearList.map(year => (
                        <option key={year} value={year}>
                            {year}
                        </option>
                    ))}
                </select>
            </div>
        );
    }
}
