import { defineComponent as W, reactive as B, ref as y, computed as O, toRef as X, watch as _, nextTick as D, createElementBlock as d, openBlock as r, normalizeClass as Y, createElementVNode as c, createVNode as C, createBlock as Z, createCommentVNode as k, toDisplayString as ee, withDirectives as F, vShow as A, Teleport as te, withModifiers as f, normalizeStyle as H, Fragment as T, renderList as L, unref as b, renderSlot as M } from "vue";
/* empty css                      */
import { deepEqual as S } from "../../helpers/objects.js";
import { useClickOutside as oe } from "../../composition/useClickOutside.js";
import { useFilteredList as ne } from "../../composition/useFilteredList.js";
import ie from "./ResizableInput.vue.js";
import { tap as le, tapIf as se } from "../../helpers/functions.js";
import { scrollIntoView as re } from "../../helpers/dom.js";
import ae from "../DropdownListItem.vue.js";
import de from "../TabItem.vue.js";
import { normalizeListOptions as ue } from "../../helpers/utils.js";
import { useElementPosition as pe } from "../../composition/usePosition.js";
const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdown__icon-wrapper" }, me = { class: "pl-line-dropdown__icon" }, ve = {
  key: 0,
  class: "pl-line-dropdown__no-item"
}, he = {
  key: 0,
  class: "pl-line-dropdown__no-item"
}, $e = /* @__PURE__ */ W({
  __name: "PlDropdownLine",
  props: {
    modelValue: {},
    disabled: { type: Boolean },
    prefix: { default: "" },
    options: {},
    placeholder: { default: "Select.." },
    mode: { default: "list" },
    tabsContainerStyles: { type: [Boolean, null, String, Object, Array], default: void 0 },
    clearable: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue"],
  setup(P, { emit: q }) {
    const I = q, i = P, n = B({
      isOpen: !1,
      activeOption: -1,
      optionsHeight: 0
    }), u = y(), m = y(), z = O(() => {
      const e = [];
      return n.isOpen && e.push("open"), i.disabled && e.push("disabled"), e.join(" ");
    }), s = y(""), a = ne(X(i, "options"), s), $ = O(() => !!(i.clearable && n.isOpen && i.modelValue && p.value)), p = O(() => {
      if (i.modelValue !== void 0) {
        const e = j();
        if (e !== -1)
          return ue(i.options)[e].label;
      }
      return "";
    }), w = y(p.value);
    _(p, (e) => {
      w.value = e;
    });
    const N = O(() => n.isOpen && s.value && s.value.length >= p.value.length - 1 ? s.value : p.value || "...");
    oe(u, () => {
      i.mode === "list" && (n.isOpen = !1);
    }), _(
      () => w.value,
      (e) => {
        p.value !== e ? s.value = e : s.value = "";
      }
    ), _(
      () => n.isOpen,
      (e) => {
        var t;
        e && u.value && ((t = u.value.querySelector("input")) == null || t.focus(), D(() => E()));
      }
    ), _(
      () => i.modelValue,
      () => R(),
      { immediate: !0 }
    );
    function j() {
      return i.options.findIndex((e) => S(e.value, i.modelValue));
    }
    function R() {
      n.activeOption = le(
        a.value.findIndex((e) => S(e.value, i.modelValue)),
        (e) => e < 0 ? 0 : e
      );
    }
    function U() {
      s.value = "";
    }
    function K() {
      i.disabled ? n.isOpen = !1 : D(() => {
        n.isOpen = !n.isOpen;
      });
    }
    function G() {
      i.mode === "list" && (n.isOpen = !1);
    }
    function v(e) {
      e && (I("update:modelValue", e.value), G(), U());
    }
    function g(e) {
      return S(e.value, i.modelValue);
    }
    const x = (e) => {
      var o, l;
      const t = e.relatedTarget;
      !((o = u.value) != null && o.contains(t)) && !((l = m.value) != null && l.contains(t)) && (s.value = "", n.isOpen = !1);
    };
    function J(e) {
      const { activeOption: t } = n;
      if (!n.isOpen && e.code === "Enter") {
        n.isOpen = !0;
        return;
      }
      const { length: o } = a.value;
      if (!o)
        return;
      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && v(a.value[t]);
      const l = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
      n.activeOption = Math.abs(t + l + o) % o, requestAnimationFrame(E);
    }
    function E() {
      const e = m.value;
      e && se(e.querySelector(".hovered-item"), (t) => {
        i.mode === "list" ? re(e, t) : t.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
      });
    }
    function Q() {
      I("update:modelValue", void 0);
    }
    const h = B({
      top: "0px",
      left: "0px"
    });
    return _(m, (e) => {
      if (e) {
        const t = e.getBoundingClientRect();
        n.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
      }
    }), pe(u, (e) => {
      const o = e.top + e.height + 2;
      o + n.optionsHeight > e.clientHeight ? h.top = e.top - n.optionsHeight - 2 + "px" : h.top = o + "px", h.left = e.left + "px";
    }), (e, t) => (r(), d("div", {
      ref_key: "container",
      ref: u,
      tabindex: "0",
      class: Y([z.value, "pl-line-dropdown uc-pointer"]),
      onKeydown: J,
      onFocusout: x,
      onClick: K
    }, [
      c("div", ce, ee(i == null ? void 0 : i.prefix), 1),
      C(ie, {
        modelValue: w.value,
        "onUpdate:modelValue": t[0] || (t[0] = (o) => w.value = o),
        placeholder: N.value,
        disabled: i.disabled,
        class: "pl-line-dropdown__input"
      }, null, 8, ["modelValue", "placeholder", "disabled"]),
      c("div", fe, [
        F(c("div", me, null, 512), [
          [A, !$.value]
        ]),
        F(c("div", {
          class: "pl-line-dropdown__icon-clear",
          onClick: Q
        }, null, 512), [
          [A, $.value]
        ])
      ]),
      n.isOpen ? (r(), Z(te, {
        key: 0,
        to: "body"
      }, [
        i.mode === "list" ? (r(), d("div", {
          key: 0,
          ref_key: "list",
          ref: m,
          style: H(h),
          tabindex: "-1",
          class: "pl-line-dropdown__items",
          onFocusout: x,
          onClick: t[1] || (t[1] = f(() => {
          }, ["stop"]))
        }, [
          (r(!0), d(T, null, L(b(a), (o, l) => M(e.$slots, "item", {
            key: l,
            item: o,
            textItem: "text",
            isSelected: g(o),
            isHovered: n.activeOption == l,
            onClick: f((V) => v(o), ["stop"])
          }, () => [
            C(ae, {
              option: o,
              "text-item": "text",
              "is-selected": g(o),
              "is-hovered": n.activeOption == l,
              size: "medium",
              onClick: f((V) => v(o), ["stop"])
            }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
          ])), 128)),
          b(a).length === 0 ? (r(), d("div", ve, [...t[3] || (t[3] = [
            c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
          ])])) : k("", !0)
        ], 36)) : i.mode === "tabs" ? (r(), d("div", {
          key: 1,
          ref_key: "list",
          ref: m,
          style: H(h),
          tabindex: "-1",
          class: "pl-line-dropdown__items-tabs",
          onFocusout: x,
          onClick: t[2] || (t[2] = f(() => {
          }, ["stop"]))
        }, [
          (r(!0), d(T, null, L(b(a), (o, l) => M(e.$slots, "item", {
            key: l,
            item: o,
            isSelected: g(o),
            isHovered: n.activeOption == l,
            onClick: f((V) => v(o), ["stop"])
          }, () => [
            C(de, {
              option: o,
              "is-selected": g(o),
              "is-hovered": n.activeOption == l,
              onClick: f((V) => v(o), ["stop"])
            }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
          ])), 128)),
          b(a).length === 0 ? (r(), d("div", he, [...t[4] || (t[4] = [
            c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
          ])])) : k("", !0)
        ], 36)) : k("", !0)
      ])) : k("", !0)
    ], 34));
  }
});
export {
  $e as default
};
//# sourceMappingURL=PlDropdownLine.vue.js.map
