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 { CombinedInputTrigger } from './PickerTrigger';
import PickerPopover from './PickerPopover';
import PanelContext from '../context/PanelContext';
import PickerContext from '../context/PickerContext';
import useCombinedDisabledDate from '../hooks/useCombinedDisabledDate';
import useRangeMergedProps from '../hooks/useRangeMergedProps';
import useHoverRange from '../hooks/useHoverRange';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
import useNormalizeDisabledDate from '../hooks/useNormalizeDisabledDate';
import { getRangeValuesWithValueType } from '../utils/getValueInRangePicker';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import { triggerCommonProps } from '../constants';
import { RangeTypeMap, } from '../types';
var START = RangeTypeMap.START, END = RangeTypeMap.END;
var PanelContextProvider = PanelContext.Provider;
export var CombinedPicker = function (_a) {
    var value = _a.value, onChange = _a.onChange, onOpen = _a.onOpen, onClose = _a.onClose, dateSpan = _a.dateSpan, disabledDateProps = _a.disabledDate, disabled = _a.disabled, restProps = __rest(_a, ["value", "onChange", "onOpen", "onClose", "dateSpan", "disabledDate", "disabled"]);
    var restPropsRef = useRef(restProps);
    restPropsRef.current = restProps;
    var _b = restPropsRef.current, defaultDate = _b.defaultDate, format = _b.format, className = _b.className, openPanel = _b.openPanel, generateDate = _b.generateDate, PanelComponent = _b.PanelComponent;
    var getInputRangeText = useContext(PickerContext).getInputRangeText;
    var onChangeRef = useEventCallbackRef(onChange);
    var _c = useRangeMergedProps({
        value: value,
        format: format,
        defaultDate: defaultDate,
        addMonthNum: 1,
    }), selected = _c.selected, parseValue = _c.parseValue, setSelected = _c.setSelected, defaultPanelDate = _c.defaultPanelDate;
    var _d = useSinglePopoverVisible(parseValue, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _d.panelVisible, setPanelVisible = _d.setPanelVisible, onVisibleChange = _d.onVisibleChange;
    var disabledDate = useNormalizeDisabledDate(format, disabledDateProps);
    var disabledCombinedDate = useCombinedDisabledDate(selected, disabledDate, generateDate, dateSpan);
    var _e = useState(), hoverDate = _e[0], setHoverDate = _e[1];
    var hoverRangeDate = useHoverRange(selected, hoverDate);
    var rangeDate = useMemo(function () {
        var startRangeDate = selected[0], endRangeDate = selected[1];
        return startRangeDate && endRangeDate
            ? [startRangeDate, endRangeDate]
            : null;
    }, [selected]);
    var onSelected = useCallback(function (val, finish) {
        var _a;
        if (finish === void 0) { finish = false; }
        setSelected(val);
        if (finish) {
            var _b = restPropsRef.current, valueType = _b.valueType, format_1 = _b.format, openPanel_1 = _b.openPanel;
            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, getRangeValuesWithValueType(valueType, format_1, val));
            setPanelVisible(openPanel_1 !== null && openPanel_1 !== void 0 ? openPanel_1 : false);
        }
    }, [onChangeRef, restPropsRef, setPanelVisible, setSelected]);
    var onClearInput = useCallback(function (evt) {
        var _a;
        evt.stopPropagation();
        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, [null, null]);
    }, [onChangeRef]);
    var text = useMemo(function () { return getInputRangeText === null || getInputRangeText === void 0 ? void 0 : getInputRangeText(selected); }, [selected, getInputRangeText]);
    var trigger = useMemo(function () {
        var triggerProps = pick(restPropsRef.current, triggerCommonProps);
        return (_jsx("div", __assign({ "data-zv": 'v10.0.12' }, { children: _jsx(CombinedInputTrigger, __assign({}, triggerProps, { disabled: disabled, selected: selected, value: value, text: text, panelVisible: panelVisible, onClearInput: onClearInput }), void 0) }), void 0));
    }, [
        selected,
        text,
        value,
        panelVisible,
        restPropsRef,
        disabled,
        onClearInput,
    ]);
    var content = useMemo(function () {
        return (_jsx("div", __assign({ className: "zent-datepicker-combined-panel", "data-zv": 'v10.0.12' }, { children: _jsx(PanelComponent, __assign({}, restPropsRef.current, { selected: selected, defaultPanelDate: defaultPanelDate, onSelected: onSelected, disabledStartDate: disabledCombinedDate(START), disabledEndDate: disabledCombinedDate(END), hoverDate: hoverDate, hoverRangeDate: hoverRangeDate, rangeDate: rangeDate }), void 0) }), void 0));
    }, [
        selected,
        hoverDate,
        rangeDate,
        hoverRangeDate,
        defaultPanelDate,
        restPropsRef,
        disabledCombinedDate,
        onSelected,
        PanelComponent,
    ]);
    return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": 'v10.0.12' }, { children: _jsx(PanelContextProvider, __assign({ value: { onHover: setHoverDate } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
};
CombinedPicker.defaultProps = {
    disabled: false,
    canClear: true,
};
export default CombinedPicker;
