define(["require", "exports", "tslib", "react", "../../Utilities", "../../FocusZone", "./Calendar.scss", "../../Icon"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, stylesImport, Icon_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var CELL_COUNT = 12;
    var DefaultCalendarYearStrings = {
        prevRangeAriaLabel: undefined,
        nextRangeAriaLabel: undefined
    };
    var DefaultNavigationIcons = {
        leftNavigation: 'Up',
        rightNavigation: 'Down',
        closeIcon: 'CalculatorMultiply'
    };
    var CalendarYearGridCell = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearGridCell, _super);
        function CalendarYearGridCell() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._buttonRef = React.createRef();
            _this._onRenderYear = function () {
                var _a = _this.props, year = _a.year, onRenderYear = _a.onRenderYear;
                if (onRenderYear) {
                    return onRenderYear(year);
                }
                return year;
            };
            _this._onClick = function () {
                if (_this.props.onSelectYear) {
                    _this.props.onSelectYear(_this.props.year);
                }
            };
            _this._onKeyDown = function (ev) {
                if (_this.props.onSelectYear && ev.which === Utilities_1.KeyCodes.enter) {
                    _this.props.onSelectYear(_this.props.year);
                }
            };
            return _this;
        }
        CalendarYearGridCell.prototype.focus = function () {
            if (this._buttonRef.current) {
                this._buttonRef.current.focus();
            }
        };
        CalendarYearGridCell.prototype.render = function () {
            var _a;
            var _b = this.props, year = _b.year, selected = _b.selected, disabled = _b.disabled, onSelectYear = _b.onSelectYear;
            return (React.createElement("button", { className: Utilities_1.css('ms-DatePicker-yearOption', styles.yearOption, (_a = {},
                    _a['ms-DatePicker-day--highlighted ' + styles.yearIsHighlighted] = selected,
                    _a['ms-DatePicker-yearOption--disabled ' + styles.yearOptionIsDisabled] = disabled,
                    _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._buttonRef }, this._onRenderYear()));
        };
        return CalendarYearGridCell;
    }(React.Component));
    var CalendarYearGrid = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearGrid, _super);
        function CalendarYearGrid() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._selectedCellRef = React.createRef();
            _this._currentCellRef = React.createRef();
            _this._renderCell = function (year) {
                var selected = year === _this.props.selectedYear;
                var _a = _this.props, minYear = _a.minYear, maxYear = _a.maxYear, onSelectYear = _a.onSelectYear;
                var disabled = (minYear !== undefined && year < minYear) || (maxYear !== undefined && year > maxYear);
                var current = year === new Date().getFullYear();
                return (React.createElement(CalendarYearGridCell, { key: year, year: year, selected: selected, current: current, disabled: disabled, onSelectYear: onSelectYear, ref: selected ? _this._selectedCellRef : current ? _this._currentCellRef : undefined }));
            };
            return _this;
        }
        CalendarYearGrid.prototype.focus = function () {
            if (this._selectedCellRef.current) {
                this._selectedCellRef.current.focus();
            }
            else if (this._currentCellRef.current) {
                this._currentCellRef.current.focus();
            }
        };
        CalendarYearGrid.prototype.render = function () {
            var _a = this.props, fromYear = _a.fromYear, toYear = _a.toYear;
            var year = fromYear;
            var cells = [];
            while (year <= toYear) {
                cells.push(this._renderCell(year));
                year++;
            }
            return (React.createElement(FocusZone_1.FocusZone, null,
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid), role: "grid" },
                    React.createElement("div", { role: "row" }, cells))));
        };
        return CalendarYearGrid;
    }(React.Component));
    var CalendarYearNavPrev = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearNavPrev, _super);
        function CalendarYearNavPrev() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._onSelectPrev = function () {
                if (!_this.isDisabled && _this.props.onSelectPrev) {
                    _this.props.onSelectPrev();
                }
            };
            _this._onKeyDown = function (ev) {
                if (ev.which === Utilities_1.KeyCodes.enter) {
                    _this._onSelectPrev();
                }
            };
            return _this;
        }
        CalendarYearNavPrev.prototype.render = function () {
            var _a;
            var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
            var strings = this.props.strings || DefaultCalendarYearStrings;
            var prevRangeAriaLabel = strings.prevRangeAriaLabel;
            var prevRange = { fromYear: this.props.fromYear - CELL_COUNT, toYear: this.props.toYear - CELL_COUNT };
            var prevAriaLabel = prevRangeAriaLabel
                ? typeof prevRangeAriaLabel === 'string'
                    ? prevRangeAriaLabel
                    : prevRangeAriaLabel(prevRange)
                : undefined;
            var disabled = this.isDisabled;
            var onSelectPrev = this.props.onSelectPrev;
            return (React.createElement("button", { className: Utilities_1.css('ms-DatePicker-prevDecade', styles.prevDecade, (_a = {},
                    _a['ms-DatePicker-prevDecade--disabled ' + styles.prevDecadeIsDisabled] = disabled,
                    _a)), onClick: !disabled && onSelectPrev ? this._onSelectPrev : undefined, onKeyDown: !disabled && onSelectPrev ? this._onKeyDown : undefined, type: "button", tabIndex: 0, title: prevAriaLabel, disabled: disabled },
                React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? iconStrings.rightNavigation : iconStrings.leftNavigation })));
        };
        Object.defineProperty(CalendarYearNavPrev.prototype, "isDisabled", {
            get: function () {
                var minYear = this.props.minYear;
                return minYear !== undefined && this.props.fromYear < minYear;
            },
            enumerable: true,
            configurable: true
        });
        return CalendarYearNavPrev;
    }(React.Component));
    var CalendarYearNavNext = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearNavNext, _super);
        function CalendarYearNavNext() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._onSelectNext = function () {
                if (!_this.isDisabled && _this.props.onSelectNext) {
                    _this.props.onSelectNext();
                }
            };
            _this._onKeyDown = function (ev) {
                if (ev.which === Utilities_1.KeyCodes.enter) {
                    _this._onSelectNext();
                }
            };
            return _this;
        }
        CalendarYearNavNext.prototype.render = function () {
            var _a;
            var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
            var strings = this.props.strings || DefaultCalendarYearStrings;
            var nextRangeAriaLabel = strings.nextRangeAriaLabel;
            var nextRange = { fromYear: this.props.fromYear + CELL_COUNT, toYear: this.props.toYear + CELL_COUNT };
            var nextAriaLabel = nextRangeAriaLabel
                ? typeof nextRangeAriaLabel === 'string'
                    ? nextRangeAriaLabel
                    : nextRangeAriaLabel(nextRange)
                : undefined;
            var onSelectNext = this.props.onSelectNext;
            var disabled = this.isDisabled;
            return (React.createElement("button", { className: Utilities_1.css('ms-DatePicker-nextDecade', styles.nextDecade, (_a = {},
                    _a['ms-DatePicker-nextDecade--disabled ' + styles.nextDecadeIsDisabled] = disabled,
                    _a)), onClick: !disabled && onSelectNext ? this._onSelectNext : undefined, onKeyDown: !disabled && onSelectNext ? this._onKeyDown : undefined, type: "button", tabIndex: 0, title: nextAriaLabel, disabled: this.isDisabled },
                React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? iconStrings.leftNavigation : iconStrings.rightNavigation })));
        };
        Object.defineProperty(CalendarYearNavNext.prototype, "isDisabled", {
            get: function () {
                var maxYear = this.props.maxYear;
                return maxYear !== undefined && this.props.fromYear + CELL_COUNT > maxYear;
            },
            enumerable: true,
            configurable: true
        });
        return CalendarYearNavNext;
    }(React.Component));
    var CalendarYearNav = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearNav, _super);
        function CalendarYearNav() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        CalendarYearNav.prototype.render = function () {
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-decadeComponents', styles.decadeComponents) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) },
                    React.createElement(CalendarYearNavPrev, tslib_1.__assign({}, this.props)),
                    React.createElement(CalendarYearNavNext, tslib_1.__assign({}, this.props)))));
        };
        return CalendarYearNav;
    }(React.Component));
    var CalendarYearTitle = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearTitle, _super);
        function CalendarYearTitle() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._onHeaderSelect = function () {
                if (_this.props.onHeaderSelect) {
                    _this.props.onHeaderSelect(true);
                }
            };
            _this._onHeaderKeyDown = function (ev) {
                if (_this.props.onHeaderSelect && (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space)) {
                    _this.props.onHeaderSelect(true);
                }
            };
            _this._onRenderYear = function (year) {
                if (_this.props.onRenderYear) {
                    return _this.props.onRenderYear(year);
                }
                return year;
            };
            return _this;
        }
        CalendarYearTitle.prototype.render = function () {
            var _a = this.props, fromYear = _a.fromYear, toYear = _a.toYear, onHeaderSelect = _a.onHeaderSelect;
            if (onHeaderSelect) {
                var strings = this.props.strings || DefaultCalendarYearStrings;
                var rangeAriaLabel = strings.rangeAriaLabel;
                var ariaLabel = rangeAriaLabel
                    ? typeof rangeAriaLabel === 'string'
                        ? rangeAriaLabel
                        : rangeAriaLabel(this.props)
                    : undefined;
                return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentDecade js-showYearPicker', styles.currentDecade, styles.headerToggleView), onClick: this._onHeaderSelect, onKeyDown: this._onHeaderKeyDown, "aria-label": ariaLabel, role: "button", "aria-atomic": true, "aria-live": "polite", tabIndex: 0 },
                    this._onRenderYear(fromYear),
                    " - ",
                    this._onRenderYear(toYear)));
            }
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentDecade js-showYearPicker', styles.currentDecade) },
                this._onRenderYear(fromYear),
                " - ",
                this._onRenderYear(toYear)));
        };
        return CalendarYearTitle;
    }(React.Component));
    var CalendarYearHeader = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYearHeader, _super);
        function CalendarYearHeader() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._onRenderTitle = function () {
                if (_this.props.onRenderTitle) {
                    return _this.props.onRenderTitle(_this.props);
                }
                return React.createElement(CalendarYearTitle, tslib_1.__assign({}, _this.props));
            };
            _this._onRenderNav = function () {
                return React.createElement(CalendarYearNav, tslib_1.__assign({}, _this.props));
            };
            return _this;
        }
        CalendarYearHeader.prototype.render = function () {
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
                this._onRenderTitle(),
                this._onRenderNav()));
        };
        return CalendarYearHeader;
    }(React.Component));
    var CalendarYear = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarYear, _super);
        function CalendarYear(props) {
            var _this = _super.call(this, props) || this;
            _this._gridRef = React.createRef();
            _this._onNavNext = function () {
                _this.setState({ fromYear: _this.state.fromYear + CELL_COUNT });
            };
            _this._onNavPrev = function () {
                _this.setState({ fromYear: _this.state.fromYear - CELL_COUNT });
            };
            _this._renderHeader = function () {
                return (React.createElement(CalendarYearHeader, tslib_1.__assign({}, _this.props, { fromYear: _this.state.fromYear, toYear: _this.state.fromYear + CELL_COUNT - 1, onSelectPrev: _this._onNavPrev, onSelectNext: _this._onNavNext })));
            };
            _this._renderGrid = function () {
                return (React.createElement(CalendarYearGrid, tslib_1.__assign({}, _this.props, { fromYear: _this.state.fromYear, toYear: _this.state.fromYear + CELL_COUNT - 1, ref: _this._gridRef })));
            };
            _this.state = _this._calculateInitialStateFromProps(props);
            return _this;
        }
        CalendarYear.prototype.focus = function () {
            if (this._gridRef.current) {
                this._gridRef.current.focus();
            }
        };
        CalendarYear.prototype.render = function () {
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearPicker', styles.yearPicker) },
                this._renderHeader(),
                this._renderGrid()));
        };
        CalendarYear.prototype._calculateInitialStateFromProps = function (props) {
            var selectedYear = props.selectedYear, navigatedYear = props.navigatedYear;
            var rangeYear = selectedYear || navigatedYear || new Date().getFullYear();
            var fromYear = Math.floor(rangeYear / 10) * 10;
            return {
                fromYear: fromYear,
                navigatedYear: navigatedYear,
                selectedYear: selectedYear
            };
        };
        return CalendarYear;
    }(React.Component));
    exports.CalendarYear = CalendarYear;
});
//# sourceMappingURL=CalendarYear.js.map