import { defineComponent, createVNode } from 'vue';
import '../../../../utils/index.mjs';
import useLock from '../hooks/useLock.mjs';
import { isValidateOpenKey } from '../utils/keyUtil.mjs';
import SingleSelector from './SingleSelector.mjs';
import SelectSelector from './MultipleSelector.mjs';
import PropTypes from '../../../../utils/vue/vueTypes.mjs';
import { createRef } from '../../../../utils/vue/createRef.mjs';
import { KeyCode } from '../../../../utils/KeyCode.mjs';

const Selector = /* @__PURE__ */ defineComponent({
  name: "Selector",
  inheritAttrs: false,
  props: {
    id: String,
    prefixCls: String,
    showSearch: {
      type: Boolean,
      default: void 0
    },
    open: {
      type: Boolean,
      default: void 0
    },
    /** Display in the Selector value, it's not same as `value` prop */
    values: PropTypes.array,
    multiple: {
      type: Boolean,
      default: void 0
    },
    mode: String,
    searchValue: String,
    activeValue: String,
    inputElement: PropTypes.any,
    autofocus: {
      type: Boolean,
      default: void 0
    },
    activeDescendantId: String,
    tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    disabled: {
      type: Boolean,
      default: void 0
    },
    placeholder: PropTypes.any,
    removeIcon: PropTypes.any,
    // Tags
    maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    maxTagTextLength: Number,
    maxTagPlaceholder: PropTypes.any,
    tagRender: Function,
    optionLabelRender: Function,
    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
    tokenWithEnter: {
      type: Boolean,
      default: void 0
    },
    // Motion
    choiceTransitionName: String,
    onToggleOpen: {
      type: Function
    },
    /** `onSearch` returns go next step boolean to check if need do toggle open */
    onSearch: Function,
    onSearchSubmit: Function,
    onRemove: Function,
    onInputKeyDown: {
      type: Function
    },
    /**
     * @private get real dom for trigger align.
     * This may be removed after React provides replacement of `findDOMNode`
     */
    domRef: Function
  },
  setup(props, {
    expose
  }) {
    const inputRef = createRef();
    let compositionStatus = false;
    const [getInputMouseDown, setInputMouseDown] = useLock(0);
    const onInternalInputKeyDown = (event) => {
      const {
        which
      } = event;
      if (which === KeyCode.UP || which === KeyCode.DOWN)
        event.preventDefault();
      if (props.onInputKeyDown)
        props.onInputKeyDown(event);
      if (which === KeyCode.ENTER && props.mode === "tags" && !compositionStatus && !props.open) {
        props.onSearchSubmit(event.target.value);
      }
      if (isValidateOpenKey(which))
        props.onToggleOpen(true);
    };
    const onInternalInputMouseDown = () => {
      setInputMouseDown(true);
    };
    let pastedText = null;
    const triggerOnSearch = (value) => {
      if (props.onSearch(value, true, compositionStatus) !== false)
        props.onToggleOpen(true);
    };
    const onInputCompositionStart = () => {
      compositionStatus = true;
    };
    const onInputCompositionEnd = (e) => {
      compositionStatus = false;
      if (props.mode !== "combobox")
        triggerOnSearch(e.target.value);
    };
    const onInputChange = (event) => {
      let {
        target: {
          value
        }
      } = event;
      if (props.tokenWithEnter && pastedText && /[\r\n]/.test(pastedText)) {
        const replacedText = pastedText.replace(/[\r\n]+$/, "").replace(/\r\n/g, " ").replace(/[\r\n]/g, " ");
        value = value.replace(replacedText, pastedText);
      }
      pastedText = null;
      triggerOnSearch(value);
    };
    const onInputPaste = (e) => {
      const {
        clipboardData
      } = e;
      const value = clipboardData.getData("text");
      pastedText = value;
    };
    const onClick = ({
      target
    }) => {
      if (target !== inputRef.current) {
        const isIE = document.body.style.msTouchAction !== void 0;
        if (isIE) {
          setTimeout(() => {
            inputRef.current.focus();
          });
        } else {
          inputRef.current.focus();
        }
      }
    };
    const onMousedown = (event) => {
      const inputMouseDown = getInputMouseDown();
      if (event.target !== inputRef.current && !inputMouseDown)
        event.preventDefault();
      if (props.mode !== "combobox" && (!props.showSearch || !inputMouseDown) || !props.open) {
        if (props.open)
          props.onSearch("", true, false);
        props.onToggleOpen();
      }
    };
    expose({
      focus: () => {
        inputRef.current.focus();
      },
      blur: () => {
        inputRef.current.blur();
      }
    });
    return () => {
      const {
        prefixCls,
        domRef,
        mode
      } = props;
      const sharedProps = {
        inputRef,
        onInputKeyDown: onInternalInputKeyDown,
        onInputMouseDown: onInternalInputMouseDown,
        onInputChange,
        onInputPaste,
        onInputCompositionStart,
        onInputCompositionEnd
      };
      const selectNode = mode === "multiple" || mode === "tags" ? createVNode(SelectSelector, {
        ...props,
        ...sharedProps
      }, null) : createVNode(SingleSelector, {
        ...props,
        ...sharedProps
      }, null);
      return createVNode("div", {
        "ref": domRef,
        "class": `${prefixCls}-selector`,
        "onClick": onClick,
        "onMousedown": onMousedown
      }, [selectNode]);
    };
  }
});

export { Selector as default };
//# sourceMappingURL=index.mjs.map
