import { __assign, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { addYears, setYear } from 'date-fns';
import { useCallback, useContext, useState } from 'react';
import PanelHeader, { Title } from '../../components/PanelHeader';
import QuarterPanelBody from './QuarterBody';
import YearPanel from '../year-panel';
import usePanelDate from '../../hooks/usePanelDate';
import PickerContext from '../../context/PickerContext';
var QuarterPickerPanel = function (props) {
    var defaultPanelDate = props.defaultPanelDate, onChangePanel = props.onChangePanel, restProps = __rest(props, ["defaultPanelDate", "onChangePanel"]);
    var i18n = useContext(PickerContext).i18n;
    var _a = usePanelDate(defaultPanelDate), panelDate = _a.panelDate, setPanelDate = _a.setPanelDate;
    var _b = useState(false), showYear = _b[0], setShowYear = _b[1];
    var QuarterPanelNode = (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { titleNode: _jsx(Title, { text: panelDate.getFullYear(), unit: i18n.panel.year, onClick: function () { return setShowYear(true); } }, void 0), onPrev: function () { return setPanelDate(addYears(panelDate, -1)); }, onNext: function () { return setPanelDate(addYears(panelDate, 1)); } }, void 0), _jsx(QuarterPanelBody, __assign({}, restProps, { defaultPanelDate: panelDate }), void 0)] }, void 0));
    var onClickYear = useCallback(function (val) {
        setPanelDate(setYear(panelDate, val.getFullYear()));
        setShowYear(false);
    }, [panelDate, setPanelDate]);
    var YearPanelNode = (_jsx(YearPanel, __assign({}, props, { onSelected: onClickYear, defaultPanelDate: panelDate }), void 0));
    return _jsx(_Fragment, { children: !showYear ? QuarterPanelNode : YearPanelNode }, void 0);
};
export default QuarterPickerPanel;
