import { __assign, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useState } from 'react';
import { setYear, setMonth, addMonths, addYears } from 'date-fns';
import PanelHeader, { Title } from '../../components/PanelHeader';
import PanelSubHeader from './PanelSubHeader';
import DatePickerBody from './DateBody';
import DatePickerFooter from './DateFooter';
import MonthPanel from '../month-panel';
import YearPanel from '../year-panel';
import PickerContext from '../../context/PickerContext';
import { useShowTimeOption } from '../../hooks/useShowTimeOption';
import usePanelDate from '../../hooks/usePanelDate';
import { useEventCallbackRef } from '../../../utils/hooks/useEventCallbackRef';
import { Lunar } from 'lunar-typescript';
var DatePickerPanel = function (props) {
    var defaultPanelDate = props.defaultPanelDate, _a = props.hideFooter, hideFooter = _a === void 0 ? false : _a, onSelected = props.onSelected, showTime = props.showTime, _b = props.footerText, footerText = _b === void 0 ? '' : _b, combinedLeft = props.combinedLeft, combinedRight = props.combinedRight, onPanelDateChange = props.onPanelDateChange, resetBodyProps = __rest(props, ["defaultPanelDate", "hideFooter", "onSelected", "showTime", "footerText", "combinedLeft", "combinedRight", "onPanelDateChange"]);
    var i18n = useContext(PickerContext).i18n;
    var _c = useState(false), showYear = _c[0], setShowYear = _c[1];
    var _d = useState(false), showMonth = _d[0], setShowMonth = _d[1];
    var _e = usePanelDate(defaultPanelDate), panelDate = _e.panelDate, setPanelDate = _e.setPanelDate;
    var showTimeOption = useShowTimeOption(showTime);
    var onPanelDateChangeRef = useEventCallbackRef(onPanelDateChange);
    var showLunarDate = resetBodyProps.showLunarDate;
    var monthLabel = useMemo(function () {
        var solarMonth = panelDate.getMonth();
        var solarMonthLabel = i18n.panel.monthNames[solarMonth];
        if (!showLunarDate) {
            return solarMonthLabel;
        }
        var d = Lunar.fromDate(new Date(panelDate.getFullYear(), solarMonth));
        var lunar = d.getMonthInChinese();
        return solarMonthLabel + "\uFF08" + lunar + "\u6708\uFF09";
    }, [showLunarDate, i18n.panel.monthNames, panelDate]);
    var titleNode = useMemo(function () { return (_jsxs(_Fragment, { children: [_jsx(Title, { text: panelDate.getFullYear(), unit: i18n.panel.year, onClick: function () { return setShowYear(true); } }, void 0), _jsx(Title, { text: monthLabel, onClick: function () { return setShowMonth(true); } }, void 0)] }, void 0)); }, [panelDate, i18n.panel.year, monthLabel]);
    var modifyPanelDate = useCallback(function (currentDate) {
        var _a;
        setPanelDate(currentDate);
        (_a = onPanelDateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPanelDateChangeRef, currentDate);
    }, [setPanelDate, onPanelDateChangeRef]);
    var onPrev = useCallback(function () {
        modifyPanelDate(addMonths(panelDate, -1));
    }, [panelDate, modifyPanelDate]);
    var onNext = useCallback(function () {
        modifyPanelDate(addMonths(panelDate, 1));
    }, [panelDate, modifyPanelDate]);
    var onSuperPrev = useCallback(function () {
        modifyPanelDate(addYears(panelDate, -1));
    }, [panelDate, modifyPanelDate]);
    var onSuperNext = useCallback(function () {
        modifyPanelDate(addYears(panelDate, 1));
    }, [panelDate, modifyPanelDate]);
    var DatePanel = (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { showSuper: true, titleNode: titleNode, combinedLeft: combinedLeft, combinedRight: combinedRight, onPrev: onPrev, onNext: onNext, onSuperPrev: onSuperPrev, onSuperNext: onSuperNext }, void 0), _jsx(PanelSubHeader, { names: i18n.panel.dayNames }, void 0), _jsx(DatePickerBody, __assign({}, resetBodyProps, { showTime: showTime, showTimeOption: showTimeOption, onSelected: function (val) {
                    onSelected(val, !showTime);
                }, defaultPanelDate: panelDate }), void 0)] }, void 0));
    var onClickYear = useCallback(function (val) {
        modifyPanelDate(setYear(panelDate, val.getFullYear()));
        setShowYear(false);
    }, [panelDate, modifyPanelDate]);
    var YearPanelNode = (_jsx(YearPanel, __assign({}, props, { onSelected: onClickYear, defaultPanelDate: panelDate }), void 0));
    var onClickMonth = useCallback(function (val) {
        var month = val.getMonth();
        var year = val.getFullYear();
        modifyPanelDate(setYear(setMonth(panelDate, month), year));
        setShowMonth(false);
    }, [panelDate, modifyPanelDate]);
    var MonthPanelNode = (_jsx(MonthPanel, __assign({}, props, { defaultPanelDate: panelDate, onSelected: onClickMonth }), void 0));
    return (_jsxs(_Fragment, { children: [!showYear && !showMonth && DatePanel, showYear && YearPanelNode, showMonth && MonthPanelNode, !hideFooter && (_jsx(DatePickerFooter, __assign({}, props, { showTimeOption: showTimeOption, footerText: footerText || (showTime ? i18n.current.time : i18n.current.date) }), void 0))] }, void 0));
};
export default DatePickerPanel;
