import * as tslib_1 from "tslib";
import * as React from 'react';
import { css, getRTL } from '../../Utilities';
import { FocusZone } from '../../FocusZone';
import * as stylesImport from './Calendar.scss';
import { Icon } from '../../Icon';
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._onRenderYear = function () {
            var _a = _this.props, year = _a.year, onRenderYear = _a.onRenderYear;
            if (onRenderYear) {
                return onRenderYear(year);
            }
            return year;
        };
        _this._onButtonRef = function (ref) {
            _this._buttonRef = ref;
        };
        _this._onClick = function () {
            if (_this.props.onSelectYear) {
                _this.props.onSelectYear(_this.props.year);
            }
        };
        _this._onKeyDown = function (ev) {
            if (_this.props.onSelectYear && ev.which === 13 /* enter */) {
                _this.props.onSelectYear(_this.props.year);
            }
        };
        return _this;
    }
    CalendarYearGridCell.prototype.focus = function () {
        if (this._buttonRef) {
            this._buttonRef.focus();
        }
    };
    CalendarYearGridCell.prototype.render = function () {
        var _a = this.props, year = _a.year, selected = _a.selected, disabled = _a.disabled, onSelectYear = _a.onSelectYear;
        return (React.createElement("button", { className: css('ms-DatePicker-yearOption', styles.yearOption, (_b = {},
                _b['ms-DatePicker-day--highlighted ' + styles.yearIsHighlighted] = selected,
                _b['ms-DatePicker-yearOption--disabled ' + styles.yearOptionIsDisabled] = disabled,
                _b)), 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._onButtonRef }, this._onRenderYear()));
        var _b;
    };
    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._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._onSelectedCellRef : current ? _this._onCurrentCellRef : undefined }));
        };
        _this._onSelectedCellRef = function (ref) {
            _this._selectedCellRef = ref;
        };
        _this._onCurrentCellRef = function (ref) {
            _this._currentCellRef = ref;
        };
        return _this;
    }
    CalendarYearGrid.prototype.focus = function () {
        if (this._selectedCellRef) {
            this._selectedCellRef.focus();
        }
        else if (this._currentCellRef) {
            this._currentCellRef.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, null,
            React.createElement("div", { className: 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 === 13 /* enter */) {
                _this._onSelectPrev();
            }
        };
        return _this;
    }
    CalendarYearNavPrev.prototype.render = function () {
        var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
        var strings = this.props.strings || DefaultCalendarYearStrings;
        var prevRangeAriaLabel = strings.prevRangeAriaLabel || strings.rangeAriaLabel;
        var prevAriaLabel = prevRangeAriaLabel
            ? typeof prevRangeAriaLabel === 'string'
                ? prevRangeAriaLabel
                : prevRangeAriaLabel(this.props)
            : undefined;
        var disabled = this.isDisabled;
        var onSelectPrev = this.props.onSelectPrev;
        return (React.createElement("button", { className: 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, "aria-label": prevAriaLabel, disabled: disabled },
            React.createElement(Icon, { iconName: getRTL() ? iconStrings.rightNavigation : iconStrings.leftNavigation })));
        var _a;
    };
    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 === 13 /* enter */) {
                _this._onSelectNext();
            }
        };
        return _this;
    }
    CalendarYearNavNext.prototype.render = function () {
        var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
        var strings = this.props.strings || DefaultCalendarYearStrings;
        var nextRangeAriaLabel = strings.nextRangeAriaLabel || strings.rangeAriaLabel;
        var nextAriaLabel = nextRangeAriaLabel
            ? typeof nextRangeAriaLabel === 'string'
                ? nextRangeAriaLabel
                : nextRangeAriaLabel(this.props)
            : undefined;
        var onSelectNext = this.props.onSelectNext;
        var disabled = this.isDisabled;
        return (React.createElement("button", { className: 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, "aria-label": nextAriaLabel, disabled: this.isDisabled },
            React.createElement(Icon, { iconName: getRTL() ? iconStrings.leftNavigation : iconStrings.rightNavigation })));
        var _a;
    };
    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: css('ms-DatePicker-decadeComponents', styles.decadeComponents) },
            React.createElement("div", { className: 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 === 13 /* enter */ || ev.which === 32 /* 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: css('ms-DatePicker-currentDecade js-showYearPicker', styles.currentDecade, styles.headerToggleView), onClick: this._onHeaderSelect, onKeyDown: this._onHeaderKeyDown, "aria-label": ariaLabel, role: "button", tabIndex: 0 },
                this._onRenderYear(fromYear),
                " - ",
                this._onRenderYear(toYear)));
        }
        return (React.createElement("div", { className: 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: 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._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._onGridRef })));
        };
        _this._onGridRef = function (ref) {
            _this._gridRef = ref;
        };
        _this.state = _this._getState(_this.props);
        return _this;
    }
    CalendarYear.prototype.componentWillReceiveProps = function (nextProps) {
        this.setState(this._getState(nextProps));
    };
    CalendarYear.prototype.focus = function () {
        if (this._gridRef) {
            this._gridRef.focus();
        }
    };
    CalendarYear.prototype.render = function () {
        return (React.createElement("div", { className: css('ms-DatePicker-yearPicker', styles.yearPicker) },
            this._renderHeader(),
            this._renderGrid()));
    };
    CalendarYear.prototype._getState = 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));
export { CalendarYear };
//# sourceMappingURL=CalendarYear.js.map