import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useContext, useMemo, useRef, useState } from 'react';
import PickerPopover from './PickerPopover';
import { SingleInputTrigger } from './PickerTrigger';
import PickerContext from '../context/PickerContext';
import PanelContext from '../context/PanelContext';
import useMergedProps from '../hooks/useMergedProps';
import useNormalizeDisabledDate from '../hooks/useNormalizeDisabledDate';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import { triggerCommonProps, INPUT_WIDTH } from '../constants';
var PanelContextProvider = PanelContext.Provider;
export function SinglePicker(_a) {
    var value = _a.value, onChange = _a.onChange, onOpen = _a.onOpen, onClose = _a.onClose, disabledDate = _a.disabledDate, restProps = __rest(_a, ["value", "onChange", "onOpen", "onClose", "disabledDate"]);
    var restPropsRef = useRef(restProps);
    restPropsRef.current = restProps;
    var _b = restPropsRef.current, defaultDate = _b.defaultDate, format = _b.format, name = _b.name, width = _b.width, placeholder = _b.placeholder, className = _b.className, valueType = _b.valueType, disabled = _b.disabled, canClear = _b.canClear, openPanel = _b.openPanel, PanelComponent = _b.PanelComponent, restPanelProps = __rest(_b, ["defaultDate", "format", "name", "width", "placeholder", "className", "valueType", "disabled", "canClear", "openPanel", "PanelComponent"]);
    var _c = restPanelProps, showLunarDate = _c.showLunarDate, lunarValueFormatter = _c.lunarValueFormatter;
    var _d = useContext(PickerContext), getSelectedValue = _d.getSelectedValue, getCallbackValue = _d.getCallbackValue, getInputText = _d.getInputText;
    var onChangeRef = useEventCallbackRef(onChange);
    var _e = useMergedProps({
        value: value,
        format: format,
        defaultDate: defaultDate,
    }), selected = _e.selected, parseValue = _e.parseValue, setSelected = _e.setSelected, defaultPanelDate = _e.defaultPanelDate;
    var _f = useSinglePopoverVisible(parseValue, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _f.panelVisible, setPanelVisible = _f.setPanelVisible, onVisibleChange = _f.onVisibleChange;
    var disabledPanelDate = useNormalizeDisabledDate(format, disabledDate);
    var _g = useState(), hoverDate = _g[0], setHoverDate = _g[1];
    var onSelected = useCallback(function (val, finish) {
        var _a;
        if (finish === void 0) { finish = true; }
        setSelected((getSelectedValue === null || getSelectedValue === void 0 ? void 0 : getSelectedValue(val)) || null);
        if (finish) {
            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, (getCallbackValue === null || getCallbackValue === void 0 ? void 0 : getCallbackValue(val)) || null);
            setPanelVisible(openPanel !== null && openPanel !== void 0 ? openPanel : false);
        }
    }, [
        getSelectedValue,
        getCallbackValue,
        onChangeRef,
        openPanel,
        setSelected,
        setPanelVisible,
    ]);
    var onClearInput = useCallback(function (evt) {
        var _a;
        evt.stopPropagation();
        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, null);
    }, [onChangeRef]);
    var text = useMemo(function () {
        if (!selected)
            return '';
        if (showLunarDate &&
            lunarValueFormatter &&
            typeof lunarValueFormatter === 'function') {
            return lunarValueFormatter(selected);
        }
        return getInputText === null || getInputText === void 0 ? void 0 : getInputText(selected);
    }, [selected, showLunarDate, getInputText, lunarValueFormatter]);
    var trigger = useMemo(function () {
        var triggerProps = pick(restPropsRef.current, triggerCommonProps);
        return (_jsx("div", __assign({ "data-zv": 'v10.0.11' }, { children: _jsx(SingleInputTrigger, __assign({}, triggerProps, { value: value, disabled: disabled, text: text, panelVisible: panelVisible, onClearInput: onClearInput }), void 0) }), void 0));
    }, [text, value, panelVisible, restPropsRef, disabled, onClearInput]);
    var content = useMemo(function () {
        var _a;
        return (_jsx("div", __assign({ className: cx('zent-datepicker-panel', (_a = {},
                _a['zent-datepicker-panel_lunar'] = !!showLunarDate,
                _a)), "data-zv": 'v10.0.11' }, { children: _jsx(PanelComponent, __assign({}, restPanelProps, { selected: selected, hoverDate: hoverDate, defaultPanelDate: defaultPanelDate, onSelected: onSelected, disabledPanelDate: disabledPanelDate }), void 0) }), void 0));
    }, [
        showLunarDate,
        PanelComponent,
        restPanelProps,
        selected,
        hoverDate,
        defaultPanelDate,
        onSelected,
        disabledPanelDate,
    ]);
    return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": 'v10.0.11' }, { children: _jsx(PanelContextProvider, __assign({ value: { onHover: setHoverDate } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
}
SinglePicker.defaultProps = {
    canClear: true,
    width: INPUT_WIDTH,
};
export default SinglePicker;
