'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var PickerPanel = require('./PickerPanel.cjs');
var PickerTrigger = require('./PickerTrigger.cjs');
var PresetPanel = require('./PresetPanel.cjs');
var dateUtil = require('./utils/dateUtil.cjs');
var miscUtil = require('./utils/miscUtil.cjs');
var PanelContext = require('./PanelContext.cjs');
var uiUtil = require('./utils/uiUtil.cjs');
var usePickerInput = require('./hooks/usePickerInput.cjs');
var useTextValueMapping = require('./hooks/useTextValueMapping.cjs');
var useValueTexts = require('./hooks/useValueTexts.cjs');
var useHoverValue = require('./hooks/useHoverValue.cjs');
var usePresets = require('./hooks/usePresets.cjs');
var warnUtil = require('./utils/warnUtil.cjs');
var index = require('../../../hooks/use-merged-state/index.cjs');
var log = require('../../../utils/log.cjs');
var _class = require('../../../utils/dom/class.cjs');

function Picker() {
  return /* @__PURE__ */ vue.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 = vue.ref(null);
      const presets = vue.computed(() => props.presets);
      const presetList = usePresets.default(presets);
      const picker = vue.computed(() => {
        var _a;
        return (_a = props.picker) != null ? _a : "date";
      });
      const needConfirmButton = vue.computed(() => picker.value === "date" && !!props.showTime || picker.value === "time");
      if (process.env.NODE_ENV !== "production")
        warnUtil.legacyPropsWarning(props);
      const formatList = vue.computed(() => miscUtil.toArray(uiUtil.getDefaultFormat(props.format, picker.value, props.showTime, props.use12Hours)));
      const panelDivRef = vue.ref(null);
      const inputDivRef = vue.ref(null);
      const containerRef = vue.ref(null);
      const [mergedValue, setInnerValue] = index.useMergedState(null, {
        value: vue.toRef(props, "value"),
        defaultValue: props.defaultValue
      });
      const selectedValue = vue.ref(mergedValue.value);
      const setSelectedValue = (val) => {
        selectedValue.value = val;
      };
      const operationRef = vue.ref(null);
      const [mergedOpen, triggerInnerOpen] = index.useMergedState(false, {
        value: vue.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.default(selectedValue, {
        formatList,
        generateConfig: vue.toRef(props, "generateConfig"),
        locale: vue.toRef(props, "locale")
      });
      const [text, triggerTextChange, resetText] = useTextValueMapping.default({
        valueTexts,
        onTextChange: (newText) => {
          const inputDate = dateUtil.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 && !dateUtil.isEqual(generateConfig, mergedValue.value, newValue)) {
          onChange(newValue, newValue ? dateUtil.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);
        }
        {
          log.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.default({
        blurToCancel: needConfirmButton,
        open: mergedOpen,
        value: text,
        triggerOpen,
        forwardKeydown,
        isClickOutside: (target) => !uiUtil.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);
        }
      });
      vue.watch([mergedOpen, valueTexts], () => {
        if (!mergedOpen.value) {
          setSelectedValue(mergedValue.value);
          if (!valueTexts.value.length || valueTexts.value[0] === "")
            triggerTextChange("");
          else if (firstValueText.value !== text.value)
            resetText();
        }
      });
      vue.watch(picker, () => {
        if (!mergedOpen.value)
          resetText();
      });
      vue.watch(mergedValue, () => {
        setSelectedValue(mergedValue.value);
      });
      const [hoverValue, onEnter, onLeave] = useHoverValue.default(text, {
        formatList,
        generateConfig: vue.toRef(props, "generateConfig"),
        locale: vue.toRef(props, "locale")
      });
      const onContextSelect = (date, type) => {
        if (type === "submit" || type !== "key" && !needConfirmButton.value) {
          triggerChange(date);
          triggerOpen(false);
        }
      };
      PanelContext.useProvidePanel({
        operationRef,
        hideHeader: vue.computed(() => picker.value === "time"),
        onSelect: onContextSelect,
        open: mergedOpen,
        defaultOpenValue: vue.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: _class.classNames({
            [`${prefixCls}-panel-focused`]: !typing.value
          }),
          style: void 0,
          pickerValue: void 0,
          onPickerValueChange: void 0,
          onChange: null
        };
        let panelNode = vue.createVNode("div", {
          "class": `${prefixCls}-panel-layout`
        }, [vue.createVNode(PresetPanel.default, {
          "prefixCls": prefixCls,
          "presets": presetList.value,
          "onClick": (nextValue) => {
            triggerChange(nextValue);
            triggerOpen(false);
          }
        }, null), vue.createVNode(PickerPanel.default, {
          ...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 = vue.createVNode("div", {
          "class": `${prefixCls}-panel-container`,
          "ref": panelDivRef,
          "onMousedown": (e) => {
            e.preventDefault();
          }
        }, [panelNode]);
        let suffixNode;
        if (suffixIcon)
          suffixNode = vue.createVNode("span", {
            "class": `${prefixCls}-suffix`
          }, [suffixIcon]);
        let clearNode;
        if (allowClear && mergedValue.value && !disabled) {
          clearNode = vue.createVNode("span", {
            "onMousedown": (e) => {
              e.preventDefault();
              e.stopPropagation();
            },
            "onMouseup": (e) => {
              e.preventDefault();
              e.stopPropagation();
              triggerChange(null);
              triggerOpen(false);
            },
            "class": `${prefixCls}-clear`,
            "role": "button"
          }, [clearIcon || vue.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: uiUtil.getInputSize(picker2, formatList.value[0], generateConfig),
          ...miscUtil.default(props),
          autocomplete
        };
        const inputNode = props.inputRender ? props.inputRender(mergedInputProps) : vue.createVNode("input", mergedInputProps, null);
        if (process.env.NODE_ENV !== "production") {
          log.warning(!defaultOpenValue, "`defaultOpenValue` may confuse user for the current value status. Please use `defaultValue` instead.");
        }
        const popupPlacement = direction === "rtl" ? "bottomRight" : "bottomLeft";
        return vue.createVNode("div", {
          "ref": containerRef,
          "class": _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
        }, [vue.createVNode("div", {
          "class": _class.classNames(`${prefixCls}-input`, {
            [`${prefixCls}-input-placeholder`]: !!hoverValue.value
          }),
          "ref": inputDivRef
        }, [inputNode, suffixNode, clearNode]), vue.createVNode(PickerTrigger.default, {
          "visible": mergedOpen.value,
          "popupStyle": popupStyle,
          "prefixCls": prefixCls,
          "dropdownClassName": dropdownClassName,
          "dropdownAlign": dropdownAlign,
          "getPopupContainer": getPopupContainer,
          "transitionName": transitionName,
          "popupPlacement": popupPlacement,
          "direction": direction
        }, {
          default: () => [vue.createVNode("div", {
            "style": {
              pointerEvents: "none",
              position: "absolute",
              top: 0,
              bottom: 0,
              left: 0,
              right: 0
            }
          }, null)],
          popupElement: () => panel
        })]);
      };
    }
  });
}
var VcPicker = Picker();

exports.default = VcPicker;
//# sourceMappingURL=Picker.cjs.map
