var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", "react", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "./Calendar.scss"], function (require, exports, React, Utilities_1, FocusZone_1, DateMath_1, Calendar_scss_1) {
    "use strict";
    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', Calendar_scss_1.default.monthPicker) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', Calendar_scss_1.default.header) },
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', Calendar_scss_1.default.yearComponents, Calendar_scss_1.default.navContainer) },
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', Calendar_scss_1.default.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), tabIndex: 0 },
                            React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', Calendar_scss_1.default.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), tabIndex: 0 },
                            React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', Calendar_scss_1.default.currentYear) }, navigatedDate.getFullYear())),
                React.createElement(FocusZone_1.FocusZone, null,
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', Calendar_scss_1.default.optionGrid) }, strings.shortMonths.map(function (month, index) {
                        return (React.createElement("span", { className: Utilities_1.css('ms-DatePicker-monthOption', Calendar_scss_1.default.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "data-is-focusable": true }, month));
                    })))));
        };
        CalendarMonth.prototype._onKeyDown = function (callback, ev) {
            if (ev.which === Utilities_1.KeyCodes.enter) {
                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;
    }(React.Component));
    exports.CalendarMonth = CalendarMonth;
});

//# sourceMappingURL=CalendarMonth.js.map
