import { defineComponent, ref, computed, toRef, watch, createVNode } from 'vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import VcPickerPanel from './PickerPanel.mjs';
import PickerTrigger from './PickerTrigger.mjs';
import PresetPanel from './PresetPanel.mjs';
import { parseValue, isEqual, formatValue } from './utils/dateUtil.mjs';
import getDataOrAriaProps, { toArray } from './utils/miscUtil.mjs';
import { useProvidePanel } from './PanelContext.mjs';
import { getDefaultFormat, elementsContains, getInputSize } from './utils/uiUtil.mjs';
import usePickerInput from './hooks/usePickerInput.mjs';
import useTextValueMapping from './hooks/useTextValueMapping.mjs';
import useValueTexts from './hooks/useValueTexts.mjs';
import useHoverValue from './hooks/useHoverValue.mjs';
import usePresets from './hooks/usePresets.mjs';
import { legacyPropsWarning } from './utils/warnUtil.mjs';
import { useMergedState } from '../../../hooks/use-merged-state/index.mjs';
import { warning } from '../../../utils/log.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

function Picker() {
  return /* @__PURE__ */ defineComponent({
    name: "Picker",
    inheritAttrs: false,
    props: ["prefixCls", "id", "tabindex", "dropdownClassName", "dropdownAlign", "popupStyle", "transitionName", "generateConfig", "locale", "inputReadOnly", "allowClear", "autofocus", "showTime", "showNow", "showHour", "showMinute", "showSecond", "picker", "format", "use12Hours", "value", "defaultValue", "open", "defaultOpen", "defaultOpenValue", "suffixIcon", "presets", "clearIcon", "disabled", "disabledDate", "placeholder", "getPopupContainer", "panelRender", "inputRender", "onChange", "onOpenChange", "onPanelChange", "onFocus", "onBlur", "onMousedown", "onMouseup", "onMouseenter", "onMouseleave", "onContextmenu", "onClick", "onKeydown", "onSelect", "direction", "autocomplete", "showToday", "renderExtraFooter", "dateRender", "minuteStep", "hourStep", "secondStep", "hideDisabledOptions"],
    setup(props, {
      attrs,
      expose
    }) {
      const inputRef = ref(null);
      const presets = computed(() => props.presets);
      const presetList = usePresets(presets);
      const picker = computed(() => {
        var _a;
        return (_a = props.picker) != null ? _a : "date";
      });
      const needConfirmButton = computed(() => picker.value === "date" && !!props.showTime || picker.value === "time");
      if (process.env.NODE_ENV !== "production")
        legacyPropsWarning(props);
      const formatList = computed(() => toArray(getDefaultFormat(props.format, picker.value, props.showTime, props.use12Hours)));
      const panelDivRef = ref(null);
      const inputDivRef = ref(null);
      const containerRef = ref(null);
      const [mergedValue, setInnerValue] = useMergedState(null, {
        value: toRef(props, "value"),
        defaultValue: props.defaultValue
      });
      const selectedValue = ref(mergedValue.value);
      const setSelectedValue = (val) => {
        selectedValue.value = val;
      };
      const operationRef = ref(null);
      const [mergedOpen, triggerInnerOpen] = useMergedState(false, {
        value: toRef(props, "open"),
        defaultValue: props.defaultOpen,
        postState: (postOpen) => props.disabled ? false : postOpen,
        onChange: (newOpen) => {
          if (props.onOpenChange)
            props.onOpenChange(newOpen);
          if (!newOpen && operationRef.value && operationRef.value.onClose)
            operationRef.value.onClose();
        }
      });
      const [valueTexts, firstValueText] = useValueTexts(selectedValue, {
        formatList,
        generateConfig: toRef(props, "generateConfig"),
        locale: toRef(props, "locale")
      });
      const [text, triggerTextChange, resetText] = useTextValueMapping({
        valueTexts,
        onTextChange: (newText) => {
          const inputDate = parseValue(newText, {
            locale: props.locale,
            formatList: formatList.value,
            generateConfig: props.generateConfig
          });
          if (inputDate && (!props.disabledDate || !props.disabledDate(inputDate)))
            setSelectedValue(inputDate);
        }
      });
      const triggerChange = (newValue) => {
        const {
          onChange,
          generateConfig,
          locale
        } = props;
        setSelectedValue(newValue);
        setInnerValue(newValue);
        if (onChange && !isEqual(generateConfig, mergedValue.value, newValue)) {
          onChange(newValue, newValue ? formatValue(newValue, {
            generateConfig,
            locale,
            format: formatList.value[0]
          }) : "");
        }
      };
      const triggerOpen = (newOpen) => {
        if (props.disabled && newOpen)
          return;
        triggerInnerOpen(newOpen);
      };
      const forwardKeydown = (e) => {
        if (mergedOpen.value && operationRef.value && operationRef.value.onKeydown) {
          return operationRef.value.onKeydown(e);
        }
        {
          warning(false, "Picker not correct forward Keydown operation. Please help to fire issue about this.");
          return false;
        }
      };
      const onInternalMouseup = (...args) => {
        if (props.onMouseup)
          props.onMouseup(...args);
        if (inputRef.value) {
          inputRef.value.focus();
          triggerOpen(true);
        }
      };
      const [inputProps, {
        focused,
        typing
      }] = usePickerInput({
        blurToCancel: needConfirmButton,
        open: mergedOpen,
        value: text,
        triggerOpen,
        forwardKeydown,
        isClickOutside: (target) => !elementsContains([panelDivRef.value, inputDivRef.value, containerRef.value], target),
        onSubmit: () => {
          if (
            // When user typing disabledDate with keyboard and enter, this value will be empty
            !selectedValue.value || props.disabledDate && props.disabledDate(selectedValue.value)
          )
            return false;
          triggerChange(selectedValue.value);
          triggerOpen(false);
          resetText();
          return true;
        },
        onCancel: () => {
          triggerOpen(false);
          setSelectedValue(mergedValue.value);
          resetText();
        },
        onKeydown: (e, preventDefault) => {
          var _a;
          (_a = props.onKeydown) == null ? void 0 : _a.call(props, e, preventDefault);
        },
        onFocus: (e) => {
          var _a;
          (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
        },
        onBlur: (e) => {
          var _a;
          (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
        }
      });
      watch([mergedOpen, valueTexts], () => {
        if (!mergedOpen.value) {
          setSelectedValue(mergedValue.value);
          if (!valueTexts.value.length || valueTexts.value[0] === "")
            triggerTextChange("");
          else if (firstValueText.value !== text.value)
            resetText();
        }
      });
      watch(picker, () => {
        if (!mergedOpen.value)
          resetText();
      });
      watch(mergedValue, () => {
        setSelectedValue(mergedValue.value);
      });
      const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
        formatList,
        generateConfig: toRef(props, "generateConfig"),
        locale: toRef(props, "locale")
      });
      const onContextSelect = (date, type) => {
        if (type === "submit" || type !== "key" && !needConfirmButton.value) {
          triggerChange(date);
          triggerOpen(false);
        }
      };
      useProvidePanel({
        operationRef,
        hideHeader: computed(() => picker.value === "time"),
        onSelect: onContextSelect,
        open: mergedOpen,
        defaultOpenValue: toRef(props, "defaultOpenValue"),
        onDateMouseenter: onEnter,
        onDateMouseleave: onLeave
      });
      expose({
        focus: () => {
          if (inputRef.value)
            inputRef.value.focus();
        },
        blur: () => {
          if (inputRef.value)
            inputRef.value.blur();
        }
      });
      return () => {
        const {
          prefixCls = "rc-picker",
          id,
          tabindex,
          dropdownClassName,
          dropdownAlign,
          popupStyle,
          transitionName,
          generateConfig,
          locale,
          inputReadOnly,
          allowClear,
          autofocus,
          picker: picker2 = "date",
          defaultOpenValue,
          suffixIcon,
          clearIcon,
          disabled,
          placeholder,
          getPopupContainer,
          panelRender,
          onMousedown,
          onMouseenter,
          onMouseleave,
          onContextmenu,
          onClick,
          onSelect,
          direction,
          autocomplete = "off"
        } = props;
        const panelProps = {
          // Remove `picker` & `format` here since TimePicker is little different with other panel
          ...props,
          ...attrs,
          class: classNames({
            [`${prefixCls}-panel-focused`]: !typing.value
          }),
          style: void 0,
          pickerValue: void 0,
          onPickerValueChange: void 0,
          onChange: null
        };
        let panelNode = createVNode("div", {
          "class": `${prefixCls}-panel-layout`
        }, [createVNode(PresetPanel, {
          "prefixCls": prefixCls,
          "presets": presetList.value,
          "onClick": (nextValue) => {
            triggerChange(nextValue);
            triggerOpen(false);
          }
        }, null), createVNode(VcPickerPanel, {
          ...panelProps,
          "generateConfig": generateConfig,
          "value": selectedValue.value,
          "locale": locale,
          "tabindex": -1,
          "onSelect": (date) => {
            onSelect == null ? void 0 : onSelect(date);
            setSelectedValue(date);
          },
          "direction": direction,
          "onPanelChange": (viewDate, mode) => {
            const {
              onPanelChange
            } = props;
            onLeave(true);
            onPanelChange == null ? void 0 : onPanelChange(viewDate, mode);
          }
        }, null)]);
        if (panelRender)
          panelNode = panelRender(panelNode);
        const panel = createVNode("div", {
          "class": `${prefixCls}-panel-container`,
          "ref": panelDivRef,
          "onMousedown": (e) => {
            e.preventDefault();
          }
        }, [panelNode]);
        let suffixNode;
        if (suffixIcon)
          suffixNode = createVNode("span", {
            "class": `${prefixCls}-suffix`
          }, [suffixIcon]);
        let clearNode;
        if (allowClear && mergedValue.value && !disabled) {
          clearNode = createVNode("span", {
            "onMousedown": (e) => {
              e.preventDefault();
              e.stopPropagation();
            },
            "onMouseup": (e) => {
              e.preventDefault();
              e.stopPropagation();
              triggerChange(null);
              triggerOpen(false);
            },
            "class": `${prefixCls}-clear`,
            "role": "button"
          }, [clearIcon || createVNode("span", {
            "class": `${prefixCls}-clear-btn`
          }, null)]);
        }
        const mergedInputProps = {
          id,
          tabindex,
          disabled,
          readonly: inputReadOnly || typeof formatList.value[0] === "function" || !typing.value,
          value: hoverValue.value || text.value,
          onInput: (e) => {
            triggerTextChange(e.target.value);
          },
          autofocus,
          placeholder,
          ref: inputRef,
          title: text.value,
          ...inputProps.value,
          size: getInputSize(picker2, formatList.value[0], generateConfig),
          ...getDataOrAriaProps(props),
          autocomplete
        };
        const inputNode = props.inputRender ? props.inputRender(mergedInputProps) : createVNode("input", mergedInputProps, null);
        if (process.env.NODE_ENV !== "production") {
          warning(!defaultOpenValue, "`defaultOpenValue` may confuse user for the current value status. Please use `defaultValue` instead.");
        }
        const popupPlacement = direction === "rtl" ? "bottomRight" : "bottomLeft";
        return createVNode("div", {
          "ref": containerRef,
          "class": classNames(prefixCls, attrs.class, {
            [`${prefixCls}-disabled`]: disabled,
            [`${prefixCls}-focused`]: focused.value,
            [`${prefixCls}-rtl`]: direction === "rtl"
          }),
          "style": attrs.style,
          "onMousedown": onMousedown,
          "onMouseup": onInternalMouseup,
          "onMouseenter": onMouseenter,
          "onMouseleave": onMouseleave,
          "onContextmenu": onContextmenu,
          "onClick": onClick
        }, [createVNode("div", {
          "class": classNames(`${prefixCls}-input`, {
            [`${prefixCls}-input-placeholder`]: !!hoverValue.value
          }),
          "ref": inputDivRef
        }, [inputNode, suffixNode, clearNode]), createVNode(PickerTrigger, {
          "visible": mergedOpen.value,
          "popupStyle": popupStyle,
          "prefixCls": prefixCls,
          "dropdownClassName": dropdownClassName,
          "dropdownAlign": dropdownAlign,
          "getPopupContainer": getPopupContainer,
          "transitionName": transitionName,
          "popupPlacement": popupPlacement,
          "direction": direction
        }, {
          default: () => [createVNode("div", {
            "style": {
              pointerEvents: "none",
              position: "absolute",
              top: 0,
              bottom: 0,
              left: 0,
              right: 0
            }
          }, null)],
          popupElement: () => panel
        })]);
      };
    }
  });
}
var VcPicker = Picker();

export { VcPicker as default };
//# sourceMappingURL=Picker.mjs.map
