import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo, useCallback } from 'react';
import PanelHeader from '../../components/PanelHeader';
import YearPanelBody from './YearBody';
import { MAX_YEAR, MIN_YEAR, MAX_PAGE } from '../../constants';
var YearPickerPanel = function (props) {
    var defaultPanelDate = props.defaultPanelDate;
    var tempYear = defaultPanelDate.getFullYear();
    var _a = useState(Math.floor((tempYear - MIN_YEAR) / 12)), page = _a[0], setPage = _a[1];
    var firstYear = useMemo(function () { return MIN_YEAR + page * 12; }, [page]);
    var onClickPrev = useCallback(function () { return page > 0 && setPage(page - 1); }, [page]);
    var onClickNext = useCallback(function () { return page < MAX_PAGE && setPage(page + 1); }, [page]);
    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { titleNode: firstYear + " - " + (firstYear + 11 > MAX_YEAR ? MAX_YEAR : firstYear + 11), onPrev: onClickPrev, onNext: onClickNext }, void 0), _jsx(YearPanelBody, __assign({ firstYear: firstYear }, props), void 0)] }, void 0));
};
export default YearPickerPanel;
