import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useCallback, useRef, useState } from 'react';
import cx from 'classnames';
import formatFn from 'date-fns/format';
import parse from 'date-fns/parse';
import PickerPopover from './PickerPopover';
import { SingleInputTrigger } from './PickerTrigger';
import PanelContext from '../context/PanelContext';
import useTimeValue from '../hooks/useTimeValue';
import useConfirmStatus from '../hooks/useConfirmStatus';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import { triggerCommonProps, timePanelProps, defaultTimePickerProps, } from '../constants';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
var emptyTime = '';
var PanelContextProvider = PanelContext.Provider;
var TimePickerBase = function (_a) {
    var onChange = _a.onChange, disabledTime = _a.disabledTime, onOpen = _a.onOpen, onClose = _a.onClose, value = _a.value, className = _a.className, ContentComponent = _a.ContentComponent, defaultTime = _a.defaultTime, selectedDate = _a.selectedDate, autoComplete = _a.autoComplete, disabled = _a.disabled, restProps = __rest(_a, ["onChange", "disabledTime", "onOpen", "onClose", "value", "className", "ContentComponent", "defaultTime", "selectedDate", "autoComplete", "disabled"]);
    var restPropsRef = useRef(restProps);
    restPropsRef.current = restProps;
    var _b = restPropsRef.current, format = _b.format, openPanel = _b.openPanel;
    var onChangeRef = useEventCallbackRef(onChange);
    var _c = useState(true), visibleChange = _c[0], setVisibleChange = _c[1];
    var _d = useTimeValue(emptyTime, value), selected = _d.selected, setSelected = _d.setSelected;
    var _e = useSinglePopoverVisible(value !== null && value !== void 0 ? value : emptyTime, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _e.panelVisible, setPanelVisible = _e.setPanelVisible, onVisibleChange = _e.onVisibleChange;
    var disabledTimeOption = useMemo(function () { return (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(selectedDate)) || {}; }, [disabledTime, selectedDate]);
    var confirmStatus = useConfirmStatus({
        selected: selected,
        disabledTimeOption: disabledTimeOption,
        format: format,
    });
    var currentTime = useMemo(function () { return formatFn(new Date(), format); }, [format]);
    var selectCurrentDate = useMemo(function () { return parse(currentTime, format, selectedDate); }, [currentTime, format, selectedDate]);
    var isDisabledCurrent = useConfirmStatus({
        selected: currentTime,
        disabledTimeOption: (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(selectCurrentDate)) || {},
        format: format,
    });
    var onSelected = useCallback(function (val, finished) {
        var _a;
        if (finished === void 0) { finished = false; }
        setVisibleChange(false);
        setSelected(val);
        if (finished || autoComplete) {
            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, val);
            finished && setVisibleChange(true);
            finished && setPanelVisible(openPanel !== null && openPanel !== void 0 ? openPanel : false);
        }
    }, [openPanel, onChangeRef, setSelected, setPanelVisible, autoComplete]);
    var onClearInput = useCallback(function (evt) {
        var _a;
        evt.stopPropagation();
        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, emptyTime);
    }, [onChangeRef]);
    var trigger = useMemo(function () {
        var hiddenIcon = restPropsRef.current.hiddenIcon;
        var triggerProps = pick(restPropsRef.current, triggerCommonProps);
        return (_jsx("div", __assign({ "data-zv": 'v10.0.12' }, { children: _jsx(SingleInputTrigger, __assign({}, triggerProps, { value: value, disabled: disabled, hiddenIcon: hiddenIcon, onClearInput: onClearInput, panelVisible: panelVisible, text: selected, icon: "clock-o" }), void 0) }), void 0));
    }, [value, selected, panelVisible, restPropsRef, disabled, onClearInput]);
    var content = useMemo(function () {
        var commonPanelProps = pick(restPropsRef.current, timePanelProps);
        return (_jsx("div", __assign({ className: "zent-datepicker-panel", "data-zv": 'v10.0.12' }, { children: _jsx(ContentComponent, __assign({}, commonPanelProps, { defaultTime: defaultTime, disabledTimeOption: disabledTimeOption, selected: selected, onSelected: onSelected }), void 0) }), void 0));
    }, [
        selected,
        restPropsRef,
        defaultTime,
        disabledTimeOption,
        onSelected,
        ContentComponent,
    ]);
    return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": 'v10.0.12' }, { children: _jsx(PanelContextProvider, __assign({ value: {
                visibleChange: visibleChange,
                confirmStatus: confirmStatus,
                isDisabledCurrent: isDisabledCurrent,
            } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
};
TimePickerBase.defaultProps = defaultTimePickerProps;
export default TimePickerBase;
