import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useMemo, useRef, useState } from 'react';
import PickerPopover from './PickerPopover';
import { CombinedInputTrigger } from './PickerTrigger';
import PanelContext from '../context/PanelContext';
import useTimeValue, { parseSelectedToRangeDate } from '../hooks/useTimeValue';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import useRangeDisabledTime from '../hooks/useRangeDisabledTime';
import { startOfToday } from 'date-fns';
import { triggerCommonProps, timePanelProps, defaultTimePickerProps, emptyTimeRange, } from '../constants';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
var prefixCls = 'zent-datepicker-combined';
var PanelContextProvider = PanelContext.Provider;
var CombinedTimePicker = function (_a) {
    var onChange = _a.onChange, disabledTime = _a.disabledTime, onOpen = _a.onOpen, onClose = _a.onClose, value = _a.value, ContentComponent = _a.ContentComponent, defaultTime = _a.defaultTime, selectedDate = _a.selectedDate, disabled = _a.disabled, restProps = __rest(_a, ["onChange", "disabledTime", "onOpen", "onClose", "value", "ContentComponent", "defaultTime", "selectedDate", "disabled"]);
    var restPropsRef = useRef(restProps);
    restPropsRef.current = restProps;
    var _b = restPropsRef.current, format = _b.format, className = _b.className, openPanel = _b.openPanel;
    var onChangeRef = useEventCallbackRef(onChange);
    var _c = useTimeValue(emptyTimeRange, value), selected = _c.selected, setSelected = _c.setSelected;
    var _d = useState(true), visibleChange = _d[0], setVisibleChange = _d[1];
    var _e = useSinglePopoverVisible(value !== null && value !== void 0 ? value : emptyTimeRange, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _e.panelVisible, setPanelVisible = _e.setPanelVisible, onVisibleChange = _e.onVisibleChange;
    var onSelected = useCallback(function (val, finished) {
        var _a;
        if (finished === void 0) { finished = false; }
        setVisibleChange(false);
        setSelected(val);
        if (finished) {
            setPanelVisible(!finished);
            setVisibleChange(true);
            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, val);
        }
    }, [onChangeRef, setSelected, setPanelVisible]);
    var onClearInput = useCallback(function (evt) {
        var _a;
        evt.stopPropagation();
        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, emptyTimeRange);
    }, [onChangeRef]);
    var selectedDates = parseSelectedToRangeDate(selected, format, new Date());
    var _f = useRangeDisabledTime({
        selected: selectedDates,
        disabledTime: disabledTime,
    }), disabledStartTimes = _f.disabledStartTimes, disabledConfirm = _f.disabledConfirm, disabledEndTimes = _f.disabledEndTimes;
    var disabledTimeOptionStart = useMemo(function () { var _a; return disabledStartTimes === null || disabledStartTimes === void 0 ? void 0 : disabledStartTimes((_a = selectedDates[0]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledStartTimes, selectedDates]);
    var disabledTimeOptionEnd = useMemo(function () { var _a; return disabledEndTimes === null || disabledEndTimes === void 0 ? void 0 : disabledEndTimes((_a = selectedDates[1]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledEndTimes, selectedDates]);
    var trigger = useMemo(function () {
        var triggerProps = pick(restPropsRef.current, triggerCommonProps);
        return (_jsx("div", __assign({ "data-zv": 'v10.0.11' }, { children: _jsx(CombinedInputTrigger, __assign({}, triggerProps, { value: value, disabled: disabled, selected: selectedDates, onClearInput: onClearInput, panelVisible: panelVisible, text: selected, icon: "clock-o" }), void 0) }), void 0));
    }, [
        value,
        selected,
        selectedDates,
        panelVisible,
        restPropsRef,
        disabled,
        onClearInput,
    ]);
    var content = useMemo(function () {
        var commonPanelProps = pick(restPropsRef.current, timePanelProps);
        return (_jsx("div", __assign({ className: cx(prefixCls + "-panel", prefixCls + "-time-panel"), "data-zv": 'v10.0.11' }, { children: _jsx(ContentComponent, __assign({}, commonPanelProps, { defaultTime: defaultTime, disabledTimeOptionStart: disabledTimeOptionStart, disabledTimeOptionEnd: disabledTimeOptionEnd, selected: selected, onSelected: onSelected }), void 0) }), void 0));
    }, [
        selected,
        defaultTime,
        restPropsRef,
        onSelected,
        disabledTimeOptionStart,
        disabledTimeOptionEnd,
        ContentComponent,
    ]);
    return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": 'v10.0.11' }, { children: _jsx(PanelContextProvider, __assign({ value: { visibleChange: visibleChange, confirmStatus: disabledConfirm } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
};
CombinedTimePicker.defaultProps = defaultTimePickerProps;
export default CombinedTimePicker;
