"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var Icon_1 = require("../../Icon");
var stylesImport = require("./Calendar.scss");
var styles = stylesImport;
var CalendarMonth = (function (_super) {
    __extends(CalendarMonth, _super);
    function CalendarMonth(props) {
        var _this = _super.call(this, props) || this;
        _this._selectMonthCallbacks = [];
        props.strings.shortMonths.map(function (month, index) {
            _this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
        });
        _this._onSelectNextYear = _this._onSelectNextYear.bind(_this);
        _this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this);
        _this._onSelectMonth = _this._onSelectMonth.bind(_this);
        return _this;
    }
    CalendarMonth.prototype.render = function () {
        var _this = this;
        var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings;
        return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
            React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) },
                    React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 },
                        React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronRight' : 'chevronLeft' })),
                    React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 },
                        React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))),
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())),
            React.createElement(FocusZone_1.FocusZone, null,
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) {
                    return React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month);
                })))));
    };
    CalendarMonth.prototype._onKeyDown = function (callback, ev) {
        if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
            callback();
        }
    };
    CalendarMonth.prototype._onSelectNextYear = function () {
        var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
        onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
    };
    ;
    CalendarMonth.prototype._onSelectPrevYear = function () {
        var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
        onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
    };
    ;
    CalendarMonth.prototype._onSelectMonth = function (newMonth) {
        var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
        onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
    };
    return CalendarMonth;
}(Utilities_1.BaseComponent));
exports.CalendarMonth = CalendarMonth;

//# sourceMappingURL=CalendarMonth.js.map
