import { defineComponent, inject, ref, computed, nextTick, onMounted, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, withCtx, createBlock, Fragment, renderList, toDisplayString, createElementVNode, withDirectives, vModelText, createCommentVNode } from 'vue';
import { isClient } from '@vueuse/core';
import _CascaderPanel from '../../cascader-panel/index.mjs';
import { PsInput } from '../../input/index.mjs';
import { PsTooltip } from '../../tooltip/index.mjs';
import { PsScrollbar } from '../../scrollbar/index.mjs';
import { PsTag } from '../../tag/index.mjs';
import { PsIcon } from '../../icon/index.mjs';
import '../../../tokens/index.mjs';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { CommonProps } from '../../cascader-panel/src/config.mjs';
import { isValidComponentSize } from '../../../utils/vue/validator.mjs';
import { useTooltipContentProps } from '../../tooltip/src/tooltip.mjs';
import { tagProps } from '../../tag/src/tag.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { formContextKey } from '../../../tokens/form.mjs';
import { useSize } from '../../../hooks/use-common-props/index.mjs';
import { addResizeListener, removeResizeListener } from '../../../utils/dom/resize-event.mjs';

const DEFAULT_INPUT_HEIGHT = 40;
const INPUT_HEIGHT_MAP = {
  large: 36,
  default: 32,
  small: 28
};
const popperOptions = {
  modifiers: [
    {
      name: "arrowPosition",
      enabled: true,
      phase: "main",
      fn: ({ state }) => {
        const { modifiersData, placement } = state;
        if (["right", "left", "bottom", "top"].includes(placement))
          return;
        modifiersData.arrow.x = 35;
      },
      requires: ["arrow"]
    }
  ]
};
const COMPONENT_NAME = "PsCascader";
const _sfc_main = defineComponent({
  name: COMPONENT_NAME,
  components: {
    PsCascaderPanel: _CascaderPanel,
    PsInput,
    PsTooltip,
    PsScrollbar,
    PsTag,
    PsIcon,
    CircleClose,
    Check,
    ArrowDown
  },
  props: {
    ...CommonProps,
    size: {
      type: String,
      validator: isValidComponentSize
    },
    placeholder: {
      type: String
    },
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    filterMethod: {
      type: Function,
      default: (node, keyword) => node.text.includes(keyword)
    },
    separator: {
      type: String,
      default: " / "
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    collapseTags: Boolean,
    collapseTagsTooltip: {
      type: Boolean,
      default: false
    },
    debounce: {
      type: Number,
      default: 300
    },
    beforeFilter: {
      type: Function,
      default: () => true
    },
    popperClass: {
      type: String,
      default: ""
    },
    popperAppendToBody: {
      type: Boolean,
      default: void 0
    },
    teleported: useTooltipContentProps.teleported,
    tagType: { ...tagProps.type, default: "info" },
    widget: {
      type: String
    }
  },
  setup(props) {
    let inputInitialHeight = 0;
    const nsCascader = useNamespace("cascader");
    const nsInput = useNamespace("input");
    const { t } = useLocale();
    const elForm = inject(formContextKey, {});
    const tooltipRef = ref(null);
    const input = ref(null);
    const tagWrapper = ref(null);
    const panel = ref(null);
    const suggestionPanel = ref(null);
    const inputHover = ref(false);
    const filtering = ref(false);
    const inputValue = ref("");
    const searchInputValue = ref("");
    const presentTags = ref([]);
    const allPresentTags = ref([]);
    const isDisabled = computed(() => props.disabled || elForm.disabled);
    const inputPlaceholder = computed(() => props.placeholder || t("el.cascader.placeholder"));
    const realSize = useSize();
    const tagSize = computed(() => ["small"].includes(realSize.value) ? "small" : "default");
    const multiple = computed(() => !!props.props.multiple);
    const readonly = computed(() => !props.filterable || multiple.value);
    const checkedNodes = computed(() => {
      var _a;
      return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
    });
    const clearBtnVisible = computed(() => {
      if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
        return false;
      return !!checkedNodes.value.length;
    });
    const presentText = computed(() => {
      const { showAllLevels, separator } = props;
      const nodes = checkedNodes.value;
      return nodes.length ? multiple.value ? " " : nodes[0].calcText(showAllLevels, separator) : "";
    });
    const updatePopperPosition = () => {
      nextTick(() => {
        var _a;
        (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
      });
    };
    const updateStyle = () => {
      var _a, _b;
      const inputInner = (_a = input.value) == null ? void 0 : _a.input;
      const tagWrapperEl = tagWrapper.value;
      const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el;
      if (!isClient || !inputInner)
        return;
      if (suggestionPanelEl) {
        const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`);
        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
      }
      if (tagWrapperEl) {
        const { offsetHeight } = tagWrapperEl;
        const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px` : `${inputInitialHeight}px`;
        inputInner.style.height = height;
        updatePopperPosition();
      }
    };
    onMounted(() => {
      var _a;
      const inputEl = (_a = input.value) == null ? void 0 : _a.$el;
      inputInitialHeight = (inputEl == null ? void 0 : inputEl.offsetHeight) || INPUT_HEIGHT_MAP[realSize.value] || DEFAULT_INPUT_HEIGHT;
      addResizeListener(inputEl, updateStyle);
    });
    onBeforeUnmount(() => {
      var _a;
      removeResizeListener((_a = input.value) == null ? void 0 : _a.$el, updateStyle);
    });
    return {
      input,
      tagWrapper,
      inputPlaceholder,
      presentText,
      inputValue,
      searchInputValue,
      presentTags,
      allPresentTags,
      isDisabled,
      realSize,
      tagSize,
      multiple,
      readonly,
      clearBtnVisible,
      nsCascader,
      nsInput
    };
  }
});
const _hoisted_1 = ["widget"];
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { class: "el-cascader__collapse-tags" };
const _hoisted_4 = ["placeholder"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_circle_close = resolveComponent("circle-close");
  const _component_ps_icon = resolveComponent("ps-icon");
  const _component_arrow_down = resolveComponent("arrow-down");
  const _component_ps_input = resolveComponent("ps-input");
  const _component_ps_tag = resolveComponent("ps-tag");
  const _component_ps_tooltip = resolveComponent("ps-tooltip");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([
      _ctx.nsCascader.b(),
      _ctx.nsCascader.m(_ctx.realSize),
      _ctx.nsCascader.is("disabled", _ctx.isDisabled),
      _ctx.$attrs.class
    ]),
    style: normalizeStyle(_ctx.$attrs.style),
    widget: _ctx.widget
  }, [
    createVNode(_component_ps_input, {
      ref: "input",
      modelValue: _ctx.inputValue,
      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
      placeholder: _ctx.inputPlaceholder,
      readonly: _ctx.readonly,
      disabled: _ctx.isDisabled,
      "validate-event": false,
      size: _ctx.realSize,
      class: normalizeClass(_ctx.nsCascader.is("focus", _ctx.popperVisible))
    }, {
      suffix: withCtx(() => [
        _ctx.clearBtnVisible ? (openBlock(), createBlock(_component_ps_icon, {
          key: "clear",
          class: normalizeClass([_ctx.nsInput.e("icon"), "icon-circle-close"])
        }, {
          default: withCtx(() => [
            createVNode(_component_circle_close)
          ]),
          _: 1
        }, 8, ["class"])) : (openBlock(), createBlock(_component_ps_icon, {
          key: "arrow-down",
          class: normalizeClass([
            _ctx.nsInput.e("icon"),
            "icon-arrow-down",
            _ctx.nsCascader.is("reverse", _ctx.popperVisible)
          ])
        }, {
          default: withCtx(() => [
            createVNode(_component_arrow_down)
          ]),
          _: 1
        }, 8, ["class"]))
      ]),
      _: 1
    }, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class"]),
    _ctx.multiple ? (openBlock(), createElementBlock("div", {
      key: 0,
      ref: "tagWrapper",
      class: normalizeClass(_ctx.nsCascader.e("tags"))
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.presentTags, (tag) => {
        return openBlock(), createBlock(_component_ps_tag, {
          key: tag.key,
          type: _ctx.tagType,
          size: _ctx.tagSize,
          hit: tag.hitState,
          closable: tag.closable,
          "disable-transitions": ""
        }, {
          default: withCtx(() => [
            tag.isCollapseTag === false ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(tag.text), 1)) : (openBlock(), createBlock(_component_ps_tooltip, {
              key: 1,
              teleported: false,
              disabled: _ctx.popperVisible || !_ctx.collapseTagsTooltip,
              "fallback-placements": ["bottom", "top", "right", "left"],
              placement: "bottom",
              effect: "light"
            }, {
              default: withCtx(() => [
                createElementVNode("span", null, toDisplayString(tag.text), 1)
              ]),
              content: withCtx(() => [
                createElementVNode("div", _hoisted_3, [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.allPresentTags, (tag2, idx) => {
                    return openBlock(), createElementBlock("div", {
                      key: idx,
                      class: "el-cascader__collapse-tag"
                    }, [
                      (openBlock(), createBlock(_component_ps_tag, {
                        key: tag2.key,
                        class: "in-tooltip",
                        type: _ctx.tagType,
                        size: _ctx.tagSize,
                        hit: tag2.hitState,
                        closable: tag2.closable,
                        "disable-transitions": ""
                      }, {
                        default: withCtx(() => [
                          createElementVNode("span", null, toDisplayString(tag2.text), 1)
                        ]),
                        _: 2
                      }, 1032, ["type", "size", "hit", "closable"]))
                    ]);
                  }), 128))
                ])
              ]),
              _: 2
            }, 1032, ["disabled"]))
          ]),
          _: 2
        }, 1032, ["type", "size", "hit", "closable"]);
      }), 128)),
      _ctx.filterable && !_ctx.isDisabled ? withDirectives((openBlock(), createElementBlock("input", {
        key: 0,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.searchInputValue = $event),
        type: "text",
        class: normalizeClass(_ctx.nsCascader.e("search-input")),
        placeholder: _ctx.presentText ? "" : _ctx.inputPlaceholder
      }, null, 10, _hoisted_4)), [
        [vModelText, _ctx.searchInputValue]
      ]) : createCommentVNode("v-if", true)
    ], 2)) : createCommentVNode("v-if", true)
  ], 14, _hoisted_1);
}
var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/cascader/src/index.vue"]]);

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