define(["require", "exports", "tslib", "react", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "../../Icon", "./Calendar.scss"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, DateMath_1, Icon_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var CalendarMonth = (function (_super) {
        tslib_1.__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._isCurrentMonth = _this._isCurrentMonth.bind(_this);
            _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, today = _a.today, highlightCurrentMonth = _a.highlightCurrentMonth, navigationIcons = _a.navigationIcons, dateTimeFormatter = _a.dateTimeFormatter;
            var leftNavigationIcon = navigationIcons.leftNavigation;
            var rightNavigationIcon = navigationIcons.rightNavigation;
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents', styles.yearComponents) },
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) },
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onSelectPrevYearKeyDown, "aria-label": strings.prevYearAriaLabel ? strings.prevYearAriaLabel + ' ' + dateTimeFormatter.formatYear(DateMath_1.addYears(navigatedDate, -1)) : undefined, role: 'button', tabIndex: 0 },
                            React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? rightNavigationIcon : leftNavigationIcon })),
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onSelectNextYearKeyDown, "aria-label": strings.nextYearAriaLabel ? strings.nextYearAriaLabel + ' ' + dateTimeFormatter.formatYear(DateMath_1.addYears(navigatedDate, 1)) : undefined, role: 'button', tabIndex: 0 },
                            React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? leftNavigationIcon : rightNavigationIcon })))),
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) }, this.props.onHeaderSelect ?
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear, styles.headerToggleView), onClick: this._onHeaderSelect, onKeyDown: this._onHeaderKeyDown, "aria-label": dateTimeFormatter.formatYear(navigatedDate), role: 'button', tabIndex: 0 }, dateTimeFormatter.formatYear(navigatedDate))
                    :
                        React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, dateTimeFormatter.formatYear(navigatedDate))),
                React.createElement(FocusZone_1.FocusZone, null,
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid), role: 'grid' }, strings.shortMonths.map(function (month, index) {
                        return React.createElement("span", { role: 'gridcell', className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption, (_a = {},
                                _a['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth] = highlightCurrentMonth && _this._isCurrentMonth(index, navigatedDate.getFullYear(), today),
                                _a['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted] = highlightCurrentMonth && (navigatedDate.getMonth() === index),
                                _a)), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": dateTimeFormatter.formatMonthYear(DateMath_1.setMonth(navigatedDate, index), strings), "aria-selected": _this._isCurrentMonth(index, navigatedDate.getFullYear(), today) || (navigatedDate.getMonth() === index), "data-is-focusable": true, ref: navigatedDate.getMonth() === index ? 'navigatedMonth' : undefined }, month);
                        var _a;
                    })))));
        };
        CalendarMonth.prototype.focus = function () {
            if (this.refs.navigatedMonth) {
                this.refs.navigatedMonth.tabIndex = 0;
                this.refs.navigatedMonth.focus();
            }
        };
        CalendarMonth.prototype._isCurrentMonth = function (month, year, today) {
            return today.getFullYear() === year && today.getMonth() === month;
        };
        CalendarMonth.prototype._onKeyDown = function (callback, ev) {
            if (ev.which === 13 /* enter */ || ev.which === 32 /* 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._onSelectNextYearKeyDown = function (ev) {
            this._onKeyDown(this._onSelectNextYear, ev);
        };
        CalendarMonth.prototype._onSelectPrevYear = function () {
            var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
            onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
        };
        CalendarMonth.prototype._onSelectPrevYearKeyDown = function (ev) {
            this._onKeyDown(this._onSelectPrevYear, ev);
        };
        CalendarMonth.prototype._onSelectMonth = function (newMonth) {
            var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate, onHeaderSelect = _a.onHeaderSelect;
            // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked
            if (onHeaderSelect) {
                onHeaderSelect(true);
            }
            onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
        };
        CalendarMonth.prototype._onHeaderSelect = function () {
            var onHeaderSelect = this.props.onHeaderSelect;
            if (onHeaderSelect) {
                onHeaderSelect(true);
            }
        };
        CalendarMonth.prototype._onHeaderKeyDown = function (ev) {
            var onHeaderSelect = this.props.onHeaderSelect;
            if (onHeaderSelect && (ev.which === 13 /* enter */ || ev.which === 32 /* space */)) {
                onHeaderSelect(true);
            }
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onKeyDown", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onSelectNextYear", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onSelectNextYearKeyDown", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onSelectPrevYear", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onSelectPrevYearKeyDown", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onSelectMonth", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onHeaderSelect", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], CalendarMonth.prototype, "_onHeaderKeyDown", null);
        return CalendarMonth;
    }(Utilities_1.BaseComponent));
    exports.CalendarMonth = CalendarMonth;
});
//# sourceMappingURL=CalendarMonth.js.map