import { defineComponent as ne, useSlots as re, ref as z, useTemplateRef as se, reactive as ae, watch as L, computed as u, toRef as ie, unref as i, createElementBlock as c, openBlock as s, createElementVNode as d, createCommentVNode as f, normalizeClass as ue, createBlock as m, createVNode as ce, withDirectives as de, vModelText as pe, Fragment as E, renderList as F, withModifiers as T, withCtx as V, createTextVNode as U, toDisplayString as v, renderSlot as K } from "vue";
/* empty css                           */
import fe from "canonicalize";
import { useWatchFetch as W } from "../../composition/useWatchFetch.js";
import { getErrorMessage as B } from "../../helpers/error.js";
import { deepEqual as I, deepIncludes as H } from "../../helpers/objects.js";
import me from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import ve from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
import { useLabelNotch as he } from "../../utils/useLabelNotch.js";
import _e from "../DropdownListItem.vue.js";
import j from "../PlChip/PlChip.vue.js";
import ye from "../PlIcon24/PlIcon24.vue.js";
import ge from "../PlTooltip/PlTooltip.vue.js";
import be from "../../assets/images/required.svg.js";
import ke from "../PlSvg/PlSvg.vue.js";
const Oe = ["tabindex"], Ve = { class: "pl-autocomplete-multi__container" }, we = { class: "pl-autocomplete-multi__field" }, Re = ["disabled", "placeholder"], xe = {
  key: 0,
  class: "chips-container"
}, Ce = { class: "pl-autocomplete-multi__controls" }, Se = { key: 0 }, $e = { class: "pl-autocomplete-multi__open-chips-container" }, Ae = {
  key: 0,
  class: "nothing-found"
}, Ee = {
  key: 0,
  class: "pl-autocomplete-multi__error"
}, Fe = {
  key: 1,
  class: "pl-autocomplete-multi__helper"
}, Te = {
  name: "PlAutocompleteMulti"
}, Qe = /* @__PURE__ */ ne({
  ...Te,
  props: {
    modelValue: { default: () => [] },
    optionsSearch: {},
    sourceId: { default: void 0 },
    label: { default: void 0 },
    helper: { default: void 0 },
    error: { default: void 0 },
    placeholder: { default: "..." },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    debounce: { default: 300 },
    resetSearchOnSelect: { type: Boolean },
    emptyOptionsText: { default: "Nothing found" },
    groupPosition: { default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(p, { emit: G }) {
    const J = G, M = (e) => J("update:modelValue", e), Q = re(), n = p, b = z(), k = z(), w = se("overlay"), l = ae({
      search: "",
      activeOption: -1,
      open: !1,
      optionsHeight: 0
    });
    L(() => l.open, (e) => {
      e || (l.search = "");
    }, { flush: "sync" });
    const O = u(() => Array.isArray(n.modelValue) ? n.modelValue : []), X = u(() => l.open && n.modelValue.length > 0 ? n.placeholder : n.modelValue.length > 0 ? "" : n.placeholder), D = ie(n, "debounce"), h = W(() => [l.search, l.open, n.sourceId], async ([e, t]) => n.optionsSearch(e, "label"), {
      filterWatchResult: ([e, t]) => t,
      debounce: D
    }), _ = W(() => [n.modelValue, n.sourceId], async ([e]) => n.optionsSearch(e, "value"), {
      debounce: D
    }), Y = u(() => {
      const e = _.value ?? [], t = h.value ?? [], o = /* @__PURE__ */ new Set(), r = [], a = (A) => {
        for (const y of A) {
          const g = fe(y.value);
          o.has(g) || (o.add(g), r.push(y));
        }
      };
      return a(e), a(t), r;
    }), R = u(() => O.value.map((e) => Y.value.find((t) => I(t.value, e))).filter(
      (e) => e !== void 0
    )), x = u(() => {
      const e = i(O);
      return [...h.value ?? []].map((o) => ({
        ...o,
        selected: H(e, o.value)
      }));
    }), C = u(() => h.loading || _.loading), S = u(() => _.value === void 0 ? !0 : n.disabled), Z = u(() => S.value ? void 0 : "0"), ee = () => {
      l.activeOption = 0;
    }, N = (e) => {
      var o;
      const t = i(O);
      M(H(t, e) ? t.filter((r) => !I(r, e)) : [...t, e]), n.resetSearchOnSelect && (l.search = ""), (o = k.value) == null || o.focus();
    }, q = (e) => M(i(O).filter((t) => !I(t, e))), oe = () => {
      var e;
      return (e = k.value) == null ? void 0 : e.focus();
    }, te = () => l.open = !l.open, P = (e) => {
      var o, r, a;
      const t = e.relatedTarget;
      !((o = b.value) != null && o.contains(t)) && !((a = (r = w.value) == null ? void 0 : r.listRef) != null && a.contains(t)) && (l.open = !1);
    }, le = (e) => {
      var y;
      const { open: t, activeOption: o } = l;
      if (!t) {
        e.code === "Enter" && (l.open = !0);
        return;
      }
      e.code === "Escape" && (l.open = !1, (y = k.value) == null || y.focus());
      const r = i(x), { length: a } = r;
      if (!a)
        return;
      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && N(r[o].value);
      const A = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
      l.activeOption = Math.abs(o + A + a) % a, requestAnimationFrame(() => {
        var g;
        return (g = w.value) == null ? void 0 : g.scrollIntoActive();
      });
    };
    he(b), L(
      () => n.modelValue,
      () => ee(),
      { immediate: !0 }
    );
    const $ = u(() => {
      if (!C.value) {
        if (h.error)
          return B(h.error);
        if (_.error)
          return B(_.error);
        if (n.error)
          return B(n.error);
        if (n.modelValue.length && R.value.length !== n.modelValue.length)
          return "The selected values are not one of the options";
      }
    });
    return (e, t) => (s(), c("div", {
      class: "pl-autocomplete-multi__envelope",
      onClick: oe
    }, [
      d("div", {
        ref_key: "rootRef",
        ref: b,
        tabindex: Z.value,
        class: ue(["pl-autocomplete-multi", { open: l.open, error: !!$.value, disabled: S.value }]),
        onKeydown: le,
        onFocusout: P
      }, [
        d("div", Ve, [
          d("div", we, [
            de(d("input", {
              ref_key: "inputRef",
              ref: k,
              "onUpdate:modelValue": t[0] || (t[0] = (o) => l.search = o),
              type: "text",
              tabindex: "-1",
              disabled: S.value,
              placeholder: X.value,
              spellcheck: "false",
              autocomplete: "chrome-off",
              onFocus: t[1] || (t[1] = (o) => l.open = !0)
            }, null, 40, Re), [
              [pe, l.search]
            ]),
            l.open ? f("", !0) : (s(), c("div", xe, [
              (s(!0), c(E, null, F(R.value, (o, r) => (s(), m(i(j), {
                key: r,
                closeable: "",
                small: "",
                onClick: t[2] || (t[2] = T((a) => l.open = !0, ["stop"])),
                onClose: (a) => q(o.value)
              }, {
                default: V(() => [
                  U(v(o.label || o.value), 1)
                ]),
                _: 2
              }, 1032, ["onClose"]))), 128))
            ])),
            d("div", Ce, [
              C.value ? (s(), m(i(ye), {
                key: 0,
                name: "loading"
              })) : f("", !0),
              K(e.$slots, "append"),
              d("div", {
                class: "pl-autocomplete-multi__arrow-wrapper",
                onClick: T(te, ["stop"])
              }, [...t[3] || (t[3] = [
                d("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
              ])])
            ])
          ]),
          p.label ? (s(), c("label", Se, [
            p.required ? (s(), m(i(ke), {
              key: 0,
              uri: i(be)
            }, null, 8, ["uri"])) : f("", !0),
            d("span", null, v(p.label), 1),
            i(Q).tooltip ? (s(), m(i(ge), {
              key: 1,
              class: "info",
              position: "top"
            }, {
              tooltip: V(() => [
                K(e.$slots, "tooltip")
              ]),
              _: 3
            })) : f("", !0)
          ])) : f("", !0),
          l.open ? (s(), m(ve, {
            key: 1,
            ref_key: "overlay",
            ref: w,
            root: b.value,
            class: "pl-autocomplete-multi__options",
            gap: 5,
            tabindex: "-1",
            onFocusout: P
          }, {
            default: V(() => [
              d("div", $e, [
                (s(!0), c(E, null, F(R.value, (o, r) => (s(), m(i(j), {
                  key: r,
                  closeable: "",
                  small: "",
                  onClose: (a) => q(o.value)
                }, {
                  default: V(() => [
                    U(v(o.label || o.value), 1)
                  ]),
                  _: 2
                }, 1032, ["onClose"]))), 128))
              ]),
              (s(!0), c(E, null, F(x.value, (o, r) => (s(), m(_e, {
                key: r,
                option: o,
                "text-item": "text",
                "is-selected": o.selected,
                "is-hovered": l.activeOption == r,
                size: "medium",
                "use-checkbox": "",
                onClick: T((a) => N(o.value), ["stop"])
              }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
              !x.value.length && !C.value ? (s(), c("div", Ae, v(p.emptyOptionsText), 1)) : f("", !0)
            ]),
            _: 1
          }, 8, ["root"])) : f("", !0),
          ce(me, {
            class: "pl-autocomplete-multi__contour",
            "group-position": p.groupPosition
          }, null, 8, ["group-position"])
        ])
      ], 42, Oe),
      $.value ? (s(), c("div", Ee, v($.value), 1)) : p.helper ? (s(), c("div", Fe, v(p.helper), 1)) : f("", !0)
    ]));
  }
});
export {
  Qe as default
};
//# sourceMappingURL=PlAutocompleteMulti.vue.js.map
