import { defineComponent as ae, ref as P, useTemplateRef as ie, reactive as se, computed as i, unref as s, watch as D, watchPostEffect as de, createElementBlock as v, openBlock as l, createElementVNode as f, createCommentVNode as c, normalizeClass as ce, createBlock as u, createVNode as $, withDirectives as ue, vModelText as pe, withCtx as z, createTextVNode as fe, toDisplayString as h, renderSlot as M, withModifiers as T } from "vue";
import me from "../../assets/images/required.svg.js";
import { getErrorMessage as ve } from "../../helpers/error.js";
import { tap as he } from "../../helpers/functions.js";
import { deepEqual as x } from "../../helpers/objects.js";
import { normalizeListOptions as we } from "../../helpers/utils.js";
import ge from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import { useLabelNotch as ye } from "../../utils/useLabelNotch.js";
import ke from "../LongText.vue.js";
/* empty css               */
import _ from "../PlIcon16/PlIcon16.vue.js";
import F from "../PlIcon24/PlIcon24.vue.js";
import Ie from "../PlSvg/PlSvg.vue.js";
import xe from "../PlTooltip/PlTooltip.vue.js";
import _e from "./OptionList.vue.js";
/* empty css                 */
import { useGroupBy as be } from "./useGroupBy.js";
const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Re = {
  key: 0,
  class: "input-value"
}, Se = { class: "pl-dropdown__controls" }, Oe = { key: 0 }, Ae = {
  key: 0,
  class: "pl-dropdown__error"
}, Be = {
  key: 1,
  class: "pl-dropdown__helper"
}, Pe = {
  key: 2,
  class: "pl-dropdown__helper"
}, De = {
  name: "PlDropdown"
}, eo = /* @__PURE__ */ ae({
  ...De,
  props: {
    modelValue: {},
    label: { default: "" },
    options: { default: void 0 },
    helper: { default: void 0 },
    loadingOptionsHelper: { default: void 0 },
    error: { default: void 0 },
    errorStatus: { type: Boolean },
    placeholder: { default: "..." },
    clearable: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    arrowIcon: { default: void 0 },
    arrowIconLarge: { default: void 0 },
    optionSize: { default: "small" },
    groupPosition: { default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(r, { emit: N }) {
    const b = N, n = r, d = P(), w = P(), g = ie("optionListRef"), o = se({
      search: "",
      activeIndex: -1,
      open: !1,
      optionsHeight: 0
    }), q = () => he(
      S.value.findIndex((e) => x(e.value, n.modelValue)),
      (e) => e < 0 ? 0 : e
    ), H = () => o.activeIndex = q(), y = i(() => n.options === void 0), V = i(() => !n.disabled && y.value), k = i(() => y.value ? !0 : n.disabled), L = i(() => (n.options ?? []).findIndex((e) => x(e.value, n.modelValue))), C = i(() => {
      if (!y.value) {
        if (n.error)
          return ve(n.error);
        if (n.modelValue !== void 0 && L.value === -1)
          return "The selected value is not one of the options";
      }
    }), E = i(
      () => we(n.options ?? []).map((e, t) => ({
        ...e,
        index: t,
        isSelected: t === L.value,
        isActive: t === o.activeIndex
      }))
    ), R = i(() => {
      const t = s(E).find((a) => x(a.value, n.modelValue));
      return (t == null ? void 0 : t.label) || n.modelValue;
    }), U = i(() => !o.open && n.modelValue !== void 0 ? "" : n.modelValue ? String(R.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), G = i(() => {
      const e = E.value;
      return o.search ? e.filter((t) => {
        const a = o.search.toLowerCase();
        return t.label.toLowerCase().includes(a) || t.description && t.description.toLowerCase().includes(a) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(a) : t.value === o.search;
      }) : e;
    }), { orderedRef: S, groupsRef: W, restRef: j } = be(G, "group"), J = i(() => k.value ? void 0 : "0"), O = (e) => {
      var t;
      b("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
    }, Q = (e) => {
      O(e);
    }, X = () => b("update:modelValue", void 0), Y = () => {
      var e;
      return (e = w.value) == null ? void 0 : e.focus();
    }, Z = () => {
      o.open = !o.open, o.open || (o.search = "");
    }, ee = () => o.open = !0, oe = (e) => {
      var a, p, m;
      const t = e.relatedTarget;
      !((a = d.value) != null && a.contains(t)) && !((m = (p = g.value) == null ? void 0 : p.listRef) != null && m.contains(t)) && (o.search = "", o.open = !1);
    }, te = (e) => {
      var A, B;
      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
        e.preventDefault();
      else
        return;
      const { open: t, activeIndex: a } = o;
      if (!t) {
        e.code === "Enter" && (o.open = !0);
        return;
      }
      e.code === "Escape" && (o.open = !1, (A = d.value) == null || A.focus());
      const p = S.value, { length: m } = p;
      if (!m)
        return;
      e.code === "Enter" && O((B = p.find((I) => I.index === a)) == null ? void 0 : B.value);
      const ne = p.findIndex((I) => I.index === a) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, le = Math.abs(ne + re + m) % m;
      o.activeIndex = p[le].index ?? -1;
    };
    return ye(d), D(() => n.modelValue, H, { immediate: !0 }), D(
      () => o.open,
      (e) => {
        var t;
        return e ? (t = w.value) == null ? void 0 : t.focus() : "";
      }
    ), de(() => {
      var e;
      o.search, o.activeIndex >= 0 && o.open && ((e = g.value) == null || e.scrollIntoActive());
    }), (e, t) => (l(), v("div", {
      class: "pl-dropdown__envelope",
      onClick: Y
    }, [
      f("div", {
        ref_key: "rootRef",
        ref: d,
        tabindex: J.value,
        class: ce(["pl-dropdown", { open: o.open, error: r.error || r.errorStatus, disabled: k.value }]),
        onKeydown: te,
        onFocusout: oe
      }, [
        f("div", Le, [
          f("div", Ce, [
            ue(f("input", {
              ref_key: "input",
              ref: w,
              "onUpdate:modelValue": t[0] || (t[0] = (a) => o.search = a),
              type: "text",
              tabindex: "-1",
              disabled: k.value,
              placeholder: U.value,
              spellcheck: "false",
              autocomplete: "chrome-off",
              onFocus: ee
            }, null, 40, Ee), [
              [pe, o.search]
            ]),
            o.open ? c("", !0) : (l(), v("div", Re, [
              $(ke, null, {
                default: z(() => [
                  fe(h(R.value), 1)
                ]),
                _: 1
              })
            ])),
            f("div", Se, [
              V.value ? (l(), u(s(F), {
                key: 0,
                name: "loading"
              })) : c("", !0),
              r.clearable && K.value ? (l(), u(s(_), {
                key: 1,
                class: "clear",
                name: "delete-clear",
                onClick: T(X, ["stop"])
              })) : c("", !0),
              M(e.$slots, "append"),
              f("div", {
                class: "pl-dropdown__arrow-wrapper",
                onClick: T(Z, ["stop"])
              }, [
                r.arrowIconLarge ? (l(), u(s(F), {
                  key: 0,
                  name: r.arrowIconLarge,
                  class: "arrow-icon"
                }, null, 8, ["name"])) : r.arrowIcon ? (l(), u(s(_), {
                  key: 1,
                  name: r.arrowIcon,
                  class: "arrow-icon"
                }, null, 8, ["name"])) : (l(), u(s(_), {
                  key: 2,
                  name: "chevron-down",
                  class: "arrow-icon arrow-icon-default"
                }))
              ])
            ])
          ]),
          r.label ? (l(), v("label", Oe, [
            r.required ? (l(), u(s(Ie), {
              key: 0,
              uri: s(me)
            }, null, 8, ["uri"])) : c("", !0),
            f("span", null, h(r.label), 1),
            e.$slots.tooltip ? (l(), u(s(xe), {
              key: 1,
              class: "info",
              position: "top"
            }, {
              tooltip: z(() => [
                M(e.$slots, "tooltip")
              ]),
              _: 3
            })) : c("", !0)
          ])) : c("", !0),
          o.open ? (l(), u(_e, {
            key: 1,
            ref_key: "optionListRef",
            ref: g,
            "root-ref": d.value,
            groups: s(W),
            rest: s(j),
            "option-size": r.optionSize,
            "select-option": Q
          }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : c("", !0),
          $(ge, {
            class: "pl-dropdown__contour",
            "group-position": r.groupPosition
          }, null, 8, ["group-position"])
        ])
      ], 42, Ve),
      C.value ? (l(), v("div", Ae, h(C.value), 1)) : V.value && r.loadingOptionsHelper ? (l(), v("div", Be, h(r.loadingOptionsHelper), 1)) : r.helper ? (l(), v("div", Pe, h(r.helper), 1)) : c("", !0)
    ]));
  }
});
export {
  eo as default
};
//# sourceMappingURL=PlDropdown.vue.js.map
