import { __assign } from "tslib";
import { classNamesFunction } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { CalendarYearGridCell } from './CalendarYearGridCell';
import { withCalendarYearProps, withCalendarYearRangeProps } from './useCalendarYear';
var getClassNames = classNamesFunction();
var CELLS_PER_ROW = 4;
export var CalendarYearGrid = Vue.extend({
    name: 'CalendarYearGrid',
    functional: true,
    props: __assign(__assign({}, withCalendarYearProps()), withCalendarYearRangeProps()),
    render: function (h, ctx) {
        var _a = ctx.props, styles = _a.styles, theme = _a.theme, className = _a.className, animateBackwards = _a.animateBackwards, animationDirection = _a.animationDirection, fromYear = _a.fromYear, toYear = _a.toYear, selectedYear = _a.selectedYear, minYear = _a.minYear, maxYear = _a.maxYear;
        var renderCell = function (yearToRender) {
            var selected = yearToRender === selectedYear;
            var disabled = (minYear !== undefined && yearToRender < minYear) ||
                (maxYear !== undefined && yearToRender > maxYear);
            var current = yearToRender === new Date().getFullYear();
            return h(CalendarYearGridCell, __assign(__assign({ key: yearToRender }, ctx.data), { props: __assign(__assign({}, ctx.props), { year: yearToRender, selected: selected, current: current, disabled: disabled }) }));
        };
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            animateBackwards: animateBackwards,
            animationDirection: animationDirection,
        });
        var onRenderYear = function (value) {
            var _a, _b, _c;
            return (_c = (_b = (_a = ctx.scopedSlots).onRenderYear) === null || _b === void 0 ? void 0 : _b.call(_a, value)) !== null && _c !== void 0 ? _c : "".concat(value);
        };
        var gridAriaLabel = "".concat(onRenderYear(fromYear), " - ").concat(onRenderYear(toYear));
        var year = fromYear;
        var cells = [];
        for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {
            cells.push([]);
            for (var j = 0; j < CELLS_PER_ROW; j++) {
                cells[i].push(renderCell(year));
                year++;
            }
        }
        // TODO FocusZone
        return h('div', {
            class: classNames.gridContainer,
            attrs: {
                role: 'grid',
                'aria-label': gridAriaLabel,
            },
        }, cells.map(function (cellRow, index) {
            return h('div', {
                key: 'yearPickerRow_' + index + '_' + fromYear,
                class: classNames.buttonRow,
                attrs: {
                    role: 'row',
                },
            }, cellRow);
        }));
    },
});
//# sourceMappingURL=CalendarYearGrid.js.map