"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const scroll = require("../../../utils/dom/scroll.js");
const index$1 = require("../../../hooks/use-locale/index.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$2 = require("../../scrollbar/index.js");
const mentionDropdown = require("./mention-dropdown.js");
const Vue = require("vue");
const _hoisted_1 = [
  "id",
  "aria-disabled",
  "aria-selected",
  "onMousemove",
  "onClick"
];
var mention_dropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElMentionDropdown",
  __name: "mention-dropdown",
  props: mentionDropdown.mentionDropdownProps,
  emits: mentionDropdown.mentionDropdownEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const ns = index.useNamespace("mention");
    const { t } = index$1.useLocale();
    const hoveringIndex = Vue.ref(-1);
    const scrollbarRef = Vue.ref();
    const optionRefs = Vue.ref();
    const dropdownRef = Vue.ref();
    const optionkls = (item, index2) => [
      ns.be("dropdown", "item"),
      ns.is("hovering", hoveringIndex.value === index2),
      ns.is("disabled", item.disabled || props.disabled)
    ];
    const handleSelect = (item) => {
      if (item.disabled || props.disabled) return;
      emit("select", item);
    };
    const handleMouseEnter = (index2) => {
      hoveringIndex.value = index2;
    };
    const filteredAllDisabled = Vue.computed(() => props.disabled || props.options.every((item) => item.disabled));
    const hoverOption = Vue.computed(() => props.options[hoveringIndex.value]);
    const selectHoverOption = () => {
      if (!hoverOption.value || hoverOption.value.disabled || props.disabled) return;
      emit("select", hoverOption.value);
    };
    const navigateOptions = (direction) => {
      const { options } = props;
      if (options.length === 0 || filteredAllDisabled.value) return;
      if (direction === "next") {
        hoveringIndex.value++;
        if (hoveringIndex.value === options.length) hoveringIndex.value = 0;
      } else if (direction === "prev") {
        hoveringIndex.value--;
        if (hoveringIndex.value < 0) hoveringIndex.value = options.length - 1;
      }
      const option = options[hoveringIndex.value];
      if (option.disabled) {
        navigateOptions(direction);
        return;
      }
      Vue.nextTick(() => scrollToOption(option));
    };
    const scrollToOption = (option) => {
      var _a, _b, _c, _d;
      const { options } = props;
      const index2 = options.findIndex((item) => item.value === option.value);
      const target = (_a = optionRefs.value) == null ? void 0 : _a[index2];
      if (target) {
        const menu = (_c = (_b = dropdownRef.value) == null ? void 0 : _b.querySelector) == null ? void 0 : _c.call(_b, `.${ns.be("dropdown", "wrap")}`);
        if (menu) scroll.scrollIntoView(menu, target);
      }
      (_d = scrollbarRef.value) == null ? void 0 : _d.handleScroll();
    };
    const resetHoveringIndex = () => {
      if (filteredAllDisabled.value || props.options.length === 0) hoveringIndex.value = -1;
      else hoveringIndex.value = props.options.findIndex((item) => !item.disabled);
    };
    Vue.watch(() => props.options, resetHoveringIndex, { immediate: true });
    __expose({
      hoveringIndex,
      navigateOptions,
      selectHoverOption,
      hoverOption
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "dropdownRef",
        ref: dropdownRef,
        class: Vue.normalizeClass(Vue.unref(ns).b("dropdown"))
      }, [
        _ctx.$slots.header ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).be("dropdown", "header"))
        }, [Vue.renderSlot(_ctx.$slots, "header")], 2)) : Vue.createCommentVNode("v-if", true),
        Vue.withDirectives(Vue.createVNode(Vue.unref(index$2.ElScrollbar), {
          id: __props.contentId,
          ref_key: "scrollbarRef",
          ref: scrollbarRef,
          tag: "ul",
          "wrap-class": Vue.unref(ns).be("dropdown", "wrap"),
          "view-class": Vue.unref(ns).be("dropdown", "list"),
          role: "listbox",
          "aria-label": __props.ariaLabel,
          "aria-orientation": "vertical"
        }, {
          default: Vue.withCtx(() => [(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(__props.options, (item, index2) => {
            return Vue.openBlock(), Vue.createElementBlock("li", {
              id: `${__props.contentId}-${index2}`,
              ref_for: true,
              ref_key: "optionRefs",
              ref: optionRefs,
              key: index2,
              class: Vue.normalizeClass(optionkls(item, index2)),
              role: "option",
              "aria-disabled": item.disabled || __props.disabled || void 0,
              "aria-selected": hoveringIndex.value === index2,
              onMousemove: ($event) => handleMouseEnter(index2),
              onClick: Vue.withModifiers(($event) => handleSelect(item), ["stop"])
            }, [Vue.renderSlot(_ctx.$slots, "label", {
              item,
              index: index2
            }, () => [Vue.createElementVNode("span", null, Vue.toDisplayString(item.label ?? item.value), 1)])], 42, _hoisted_1);
          }), 128))]),
          _: 3
        }, 8, [
          "id",
          "wrap-class",
          "view-class",
          "aria-label"
        ]), [[Vue.vShow, __props.options.length > 0 && !__props.loading]]),
        __props.loading ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 1,
          class: Vue.normalizeClass(Vue.unref(ns).be("dropdown", "loading"))
        }, [Vue.renderSlot(_ctx.$slots, "loading", {}, () => [Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("el.mention.loading")), 1)])], 2)) : Vue.createCommentVNode("v-if", true),
        _ctx.$slots.footer ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 2,
          class: Vue.normalizeClass(Vue.unref(ns).be("dropdown", "footer"))
        }, [Vue.renderSlot(_ctx.$slots, "footer")], 2)) : Vue.createCommentVNode("v-if", true)
      ], 2);
    };
  }
});
exports.default = mention_dropdown_vue_vue_type_script_setup_true_lang_default;
