import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from 'react';
import cx from 'classnames';
import { parse, addMonths, endOfDay, startOfDay } from 'date-fns';
import DatePanel from '../date-panel/index';
import RangePickerFooter from './RangeFooter';
import { useShowTimeRangeOption } from '../../hooks/useShowTimeOption';
import useRangeDisabledTime from '../../hooks/useRangeDisabledTime';
var prefixCls = 'zent-datepicker-combined-panel';
var CombinedDateRangePanel = function (_a) {
    var onSelected = _a.onSelected, selected = _a.selected, disabledStartDate = _a.disabledStartDate, disabledEndDate = _a.disabledEndDate, defaultPanelDate = _a.defaultPanelDate, showTime = _a.showTime, disabledTime = _a.disabledTime, rightClassName = _a.rightClassName, leftClassName = _a.leftClassName, footerClassName = _a.footerClassName, _b = _a.hideConfirm, hideConfirm = _b === void 0 ? false : _b, restProps = __rest(_a, ["onSelected", "selected", "disabledStartDate", "disabledEndDate", "defaultPanelDate", "showTime", "disabledTime", "rightClassName", "leftClassName", "footerClassName", "hideConfirm"]);
    var start = selected[0], end = selected[1];
    var _c = useShowTimeRangeOption(showTime), startShowTime = _c[0], endShowTime = _c[1];
    var _d = useState(defaultPanelDate[0]), startPanelDate = _d[0], setStartPanelDate = _d[1];
    useEffect(function () { return setStartPanelDate(defaultPanelDate[0]); }, []);
    var _e = useRangeDisabledTime({
        selected: selected,
        disabledTime: disabledTime,
    }), disabledStartTimes = _e.disabledStartTimes, disabledConfirm = _e.disabledConfirm, disabledEndTimes = _e.disabledEndTimes;
    var onChangeStartOrEnd = useCallback(function (val) {
        var _a = startShowTime || {}, defaultTimeStart = _a.defaultTime, formatStart = _a.format;
        var _b = endShowTime || {}, defaultTimeEnd = _b.defaultTime, formatEnd = _b.format;
        var selectedTemp;
        var defaultStartTime = function (date) {
            return typeof defaultTimeStart === 'function'
                ? defaultTimeStart(date)
                : defaultTimeStart;
        };
        var defaultEndTime = function (date) {
            return typeof defaultTimeEnd === 'function'
                ? defaultTimeEnd(date)
                : defaultTimeEnd;
        };
        if (start && !end) {
            selectedTemp = [
                startShowTime ? start : startOfDay(start),
                endShowTime
                    ? parse(defaultEndTime(val), formatEnd, val)
                    : endOfDay(val),
            ];
            onSelected(selectedTemp, !showTime);
        }
        else {
            selectedTemp = [
                startShowTime
                    ? parse(defaultStartTime(val), formatStart, val)
                    : startOfDay(val),
                null,
            ];
            onSelected(selectedTemp);
        }
    }, [start, end, showTime, startShowTime, endShowTime, onSelected]);
    var disabledFooterStartTimes = useCallback(disabledStartTimes, [
        disabledStartTimes,
    ]);
    var disabledFooterEndTimes = useCallback(disabledEndTimes, [
        disabledEndTimes,
    ]);
    var onStartPanelDateChange = useCallback(function (val) {
        setStartPanelDate(val);
    }, []);
    var onEndPanelDateChange = useCallback(function (val) {
        var start = addMonths(val, -1);
        setStartPanelDate(start);
    }, []);
    var FooterNode = useMemo(function () {
        return startShowTime ? (_jsx("div", __assign({ className: cx(prefixCls + "-footer", footerClassName), "data-zv": 'v10.0.12' }, { children: _jsx(RangePickerFooter, { format: startShowTime === null || startShowTime === void 0 ? void 0 : startShowTime.format, selected: selected, onSelected: onSelected, disabledStartTimes: disabledFooterStartTimes, disabledConfirm: disabledConfirm, disabledEndTimes: disabledFooterEndTimes, hideConfirm: hideConfirm }, void 0) }), void 0)) : null;
    }, [
        startShowTime,
        footerClassName,
        selected,
        onSelected,
        disabledFooterStartTimes,
        disabledConfirm,
        disabledFooterEndTimes,
        hideConfirm,
    ]);
    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: prefixCls + "-body", "data-zv": 'v10.0.12' }, { children: [_jsx("div", __assign({ className: cx(prefixCls + "-body-item", leftClassName), "data-zv": 'v10.0.12' }, { children: _jsx(DatePanel, __assign({}, restProps, { combinedLeft: true, hideFooter: true, disableRangeOverView: true, selected: start, disabledTime: disabledStartTimes, popText: start && !end ? '请选择结束日期' : '', defaultPanelDate: startPanelDate, onSelected: onChangeStartOrEnd, disabledPanelDate: disabledStartDate, onPanelDateChange: onStartPanelDateChange }), void 0) }), void 0), _jsx("div", __assign({ className: cx(prefixCls + "-body-item", prefixCls + "-body-item_left12", rightClassName), "data-zv": 'v10.0.12' }, { children: _jsx(DatePanel, __assign({}, restProps, { combinedRight: true, hideFooter: true, disableRangeOverView: true, selected: end || start, disabledTime: disabledEndTimes, defaultPanelDate: addMonths(startPanelDate, 1), onSelected: onChangeStartOrEnd, disabledPanelDate: disabledEndDate, onPanelDateChange: onEndPanelDateChange }), void 0) }), void 0)] }), void 0), FooterNode] }, void 0));
};
export default CombinedDateRangePanel;
