import { defineComponent as Se, ref as p, computed as O, watch as x, nextTick as K, unref as s, onUnmounted as Be, openBlock as r, createBlock as $, mergeProps as W, toHandlers as se, withCtx as c, createElementVNode as T, createElementBlock as n, normalizeClass as A, Fragment as g, createTextVNode as C, toDisplayString as y, createVNode as D, renderSlot as R, createCommentVNode as S, renderList as M, createSlots as Ne, withModifiers as ze, withDirectives as xe, vModelSelect as De } from "vue";
import { useEventListener as Pe, useResizeObserver as Fe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useColors as Ee } from "../../composables/useColors.js";
import { useCommon as fe } from "../../composables/useCommon.js";
import { useInputtable as G } from "../../composables/useInputtable.js";
import { useInteractive as ve } from "../../composables/useInteractive.js";
import { useTheme as He } from "../../composables/useTheme.js";
import { useVirtualList as qe } from "../../composables/useVirtualList.js";
import { checkIcon as We, selectIcon as Me } from "../../common/icons.js";
import Ue from "../label/Label.vue.js";
import ne from "../tag/Tag.vue.js";
import je from "../icon/Icon.vue.js";
import Xe from "../menu/MenuItem.vue.js";
import Ke from "../spinner/Spinner.vue.js";
import ue from "../popover/Popover.vue.js";
import "../popover/Popover.vue3.js";
import de from "../popover/PopoverContainer.vue.js";
import Ge from "../inputFooter/InputFooter.vue.js";
import Je from "../input/Input.vue.js";
import { useThrottleFn as Qe } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
const Ye = { class: "relative" }, Ze = {
  key: 0,
  class: "text-secondary-400 dark:text-secondary-500"
}, _e = { key: 1 }, el = {
  key: 0,
  class: "text-secondary-400 dark:text-secondary-500"
}, ll = { key: 1 }, tl = {
  key: 0,
  class: "p-2 text-center text-secondary-400"
}, il = ["id", "name", "disabled", "multiple", "readonly"], al = ["value", "disabled"], ol = {
  ...Ee.props("secondary"),
  ...fe.props(),
  ...ve.props(),
  ...G.props(),
  placeholder: String,
  options: Array,
  multiple: Boolean,
  truncate: Boolean,
  flat: Boolean,
  native: Boolean,
  filterable: Boolean,
  filterPlaceholder: {
    type: String,
    default: "Filter by..."
  },
  virtualList: Boolean,
  virtualListOffsetTop: Number,
  virtualListOffsetBottom: Number,
  virtualListItemHeight: {
    type: Number,
    default: 33
  },
  virtualListOverscan: {
    type: Number,
    default: 5
  }
}, rl = {
  name: "XSelect",
  validators: {
    ...fe.validators()
  }
}, Il = /* @__PURE__ */ Se({
  ...rl,
  props: ol,
  emits: G.emits(),
  setup(pe, { expose: ce, emit: me }) {
    const a = pe, P = me, U = p(null), j = p(null), F = p(null), b = p(null), u = p(), V = p(""), X = p(null), k = O(() => a.disabled || a.loading || a.readonly), o = O({
      get() {
        return a.multiple ? a.modelValue ? Array.isArray(a.modelValue) ? a.modelValue : [a.modelValue] : [] : a.modelValue;
      },
      set(e) {
        P("update:modelValue", e);
      }
    }), d = O(() => !a.options || a.options.length === 0 ? [] : a.options.filter((e) => V.value === "" || e.label.toLowerCase().includes(V.value.toLowerCase())).map((e) => {
      let t = !1;
      return a.multiple && Array.isArray(o.value) ? t = o.value.includes(e.value) : t = e.value === o.value, {
        value: e.value,
        label: e.label,
        active: t,
        prefix: e.prefix,
        suffix: e.suffix,
        disabled: e.disabled,
        iconRight: t ? We : void 0,
        onClick: () => Z(e.value)
      };
    })), J = O(() => d.value.filter((e) => !e.disabled)), { list: Q, scrollTo: ye, containerProps: be, wrapperProps: he } = qe(
      d,
      {
        disabled: !a.virtualList,
        itemHeight: a.virtualListItemHeight,
        topOffset: a.virtualListOffsetTop || 0,
        bottomOffset: a.virtualListOffsetBottom || 0,
        overscan: a.virtualListOverscan
      }
    ), I = O(() => {
      var e;
      return (e = b.value) == null ? void 0 : e.isOpen;
    });
    x(V, (e) => {
      e && (u.value = void 0, E(-1));
    }), x(I, (e) => {
      e ? (ge(), (a.multiple || typeof u.value > "u") && E(-1), setTimeout(() => {
        requestAnimationFrame(() => {
          var t;
          Y(u.value || 0), a.filterable && ((t = X.value) == null || t.focus());
        });
      }, 50)) : a.filterable && (V.value = "");
    });
    function ge() {
      if (a.multiple) {
        if (Array.isArray(o.value) && o.value.length > 0) {
          const e = d.value.findIndex((t) => t.value === o.value[0]);
          e !== -1 && (u.value = e);
        }
      } else {
        const e = d.value.findIndex((t) => t.value === o.value);
        e !== -1 && (u.value = e);
      }
    }
    function Y(e) {
      var t;
      a.virtualList ? ye(e) : F.value && ((t = F.value[e]) == null || t.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
    }
    x(u, (e) => {
      typeof e < "u" && F.value && Y(e);
    });
    function E(e, t = "down") {
      if (!J.value || J.value.length === 0) {
        u.value = void 0;
        return;
      }
      if (typeof e > "u" && (e = t === "down" ? -1 : 1), t === "down") {
        let l = e + 1;
        for (l > d.value.length - 1 && (l = 0); d.value[l].disabled; )
          ++l > d.value.length - 1 && (l = 0);
        u.value = l;
      } else {
        let l = e - 1;
        for (l < 0 && (l = d.value.length - 1); d.value[l].disabled; )
          --l < 0 && (l = d.value.length - 1);
        u.value = l;
      }
    }
    function Z(e) {
      var l;
      const t = (l = a.options) == null ? void 0 : l.find((i) => i.value === e);
      if (!(!t || t.disabled)) {
        if (a.multiple) {
          if (Array.isArray(o.value)) {
            const i = o.value.indexOf(e);
            i !== -1 ? o.value.splice(i, 1) : (o.value.push(e), P("update:modelValue", o.value));
          } else
            o.value = [e];
          a.filterable && setTimeout(() => {
            var i;
            (i = X.value) == null || i.focus();
          });
        } else
          o.value = e;
        a.native || K(() => {
          var i;
          ae(), (i = j.value) == null || i.$el.focus();
        });
      }
    }
    function _(e) {
      return !!(typeof e > "u" || e === null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
    }
    function ee(e, t) {
      if (e.stopPropagation(), k.value)
        return;
      const l = o.value.indexOf(t);
      l !== -1 && (o.value.splice(l, 1), P("update:modelValue", o.value));
    }
    function B(e) {
      var l;
      const t = (l = a.options) == null ? void 0 : l.find((i) => i.value === e);
      return t ? t.label : "";
    }
    const { focus: le, blur: ke } = ve(U), {
      errorInternal: te,
      hideFooterInternal: we,
      inputListeners: ie,
      reset: Ae,
      validate: ae,
      setError: Le,
      isFocused: $e,
      isInsideForm: Re
    } = G(a, { focus: le, emit: P, withListeners: !0 }), Ve = O(() => {
      const { focus: e, blur: t } = s(ie);
      return {
        focus: e,
        blur: t
      };
    });
    let L = null;
    x([$e, I], ([e, t]) => {
      e || t ? L || (L = Pe(document, "keydown", Ie)) : L && (L(), L = null);
    }, {
      immediate: !0
    }), Be(() => {
      L && L();
    });
    function Ie(e) {
      var t, l, i, m, f;
      if (d.value.length !== 0)
        if (e.code === "ArrowDown") {
          if (e.preventDefault(), !I.value) {
            (t = b.value) == null || t.show();
            return;
          }
          E(u.value, "down");
        } else if (e.code === "ArrowUp") {
          if (e.preventDefault(), !I.value) {
            (l = b.value) == null || l.show();
            return;
          }
          E(u.value, "up");
        } else if (e.code === "Enter" || e.code === "Space") {
          if (e.code === "Space" && a.filterable)
            return;
          if (e.preventDefault(), e.stopPropagation(), !I.value) {
            (i = b.value) == null || i.show();
            return;
          }
          typeof u.value < "u" && d.value[u.value] && (Z(d.value[u.value].value), a.multiple || (m = b.value) == null || m.hide());
        } else
          e.code === "Tab" && I.value && (e.preventDefault(), (f = b.value) == null || f.hide(), a.native || K(() => {
            var v;
            (v = j.value) == null || v.$el.focus();
          }));
    }
    const N = p(null), oe = p(null), H = p(!1), q = p(0), re = Qe(() => {
      a.multiple && a.truncate && K(() => {
        const e = Oe();
        e < o.value.length ? (H.value = !0, q.value = o.value.length - e) : (H.value = !1, q.value = 0);
      });
    }, 100, !0);
    Fe(N, () => {
      re();
    });
    function Oe() {
      if (!N.value)
        return 0;
      const e = N.value.querySelectorAll(".x-tag"), t = Array.from(e);
      let l = 0, i = 0;
      const m = N.value.offsetWidth - 30;
      for (let f = 0; f < t.length; f++) {
        const v = t[f];
        v.style.display = "flex", l += v.offsetWidth, l < m ? i++ : v.style.display = "none";
      }
      return i;
    }
    x(o, (e) => {
      re();
    }, { immediate: !0, deep: !0 });
    const { styles: Te, classes: h, className: Ce } = He("Select", {}, a, { errorInternal: te });
    return ce({ focus: le, blur: ke, reset: Ae, validate: ae, setError: Le }), (e, t) => (r(), $(Ue, W({
      ref_key: "labelRef",
      ref: j,
      tabindex: "0",
      class: ["group", [
        s(Ce),
        s(h).wrapper
      ]],
      style: s(Te),
      disabled: k.value,
      required: e.required,
      "is-inside-form": s(Re),
      label: e.label,
      tooltip: e.tooltip
    }, se(Ve.value)), {
      default: c(() => [
        T("div", Ye, [
          e.native && !e.multiple ? (r(), n("div", {
            key: 0,
            class: A(s(h).box),
            onClick: t[0] || (t[0] = (l) => {
              var i;
              return (i = U.value) == null ? void 0 : i.click();
            })
          }, [
            _(o.value) ? (r(), n(g, { key: 1 }, [
              e.placeholder ? (r(), n("div", Ze, y(e.placeholder), 1)) : (r(), n("div", _e, " "))
            ], 64)) : (r(), n(g, { key: 0 }, [
              C(y(B(o.value)), 1)
            ], 64))
          ], 2)) : (r(), n(g, { key: 1 }, [
            D(ue, {
              ref_key: "popoverRef",
              ref: b,
              disabled: k.value
            }, {
              content: c(() => [
                D(de, {
                  class: A(s(h).content)
                }, {
                  default: c(() => [
                    R(e.$slots, "content-header", {}, () => [
                      e.filterable ? (r(), n("div", {
                        key: 0,
                        class: A(s(h).search)
                      }, [
                        D(Je, {
                          ref_key: "filterRef",
                          ref: X,
                          modelValue: V.value,
                          "onUpdate:modelValue": t[2] || (t[2] = (l) => V.value = l),
                          placeholder: e.filterPlaceholder,
                          "skip-form-registry": "",
                          size: "sm"
                        }, null, 8, ["modelValue", "placeholder"])
                      ], 2)) : S("", !0)
                    ]),
                    T("div", W(s(be), {
                      class: s(h).contentBody
                    }), [
                      T("div", W(s(he), { class: "space-y-0.5" }), [
                        (r(!0), n(g, null, M(s(Q), (l) => (r(), $(Xe, {
                          key: l.index,
                          ref_for: !0,
                          ref_key: "itemsRef",
                          ref: F,
                          item: l.data,
                          size: e.size,
                          disabled: l.data.disabled,
                          selected: l.index === u.value,
                          color: e.color,
                          filled: "",
                          onClick: t[3] || (t[3] = () => {
                            var i;
                            return !e.multiple && ((i = b.value) == null ? void 0 : i.hide());
                          })
                        }, Ne({
                          default: c(() => [
                            R(e.$slots, "label", {
                              item: l.data
                            })
                          ]),
                          _: 2
                        }, [
                          e.$slots.prefix || l.data.prefix ? {
                            name: "prefix",
                            fn: c(() => [
                              R(e.$slots, "prefix", {
                                item: l.data
                              }, () => [
                                C(y(l.data.prefix), 1)
                              ])
                            ]),
                            key: "0"
                          } : void 0,
                          e.$slots.suffix || l.data.suffix ? {
                            name: "suffix",
                            fn: c(() => [
                              R(e.$slots, "suffix", {
                                item: l.data
                              }, () => [
                                C(y(l.data.suffix), 1)
                              ])
                            ]),
                            key: "1"
                          } : void 0
                        ]), 1032, ["item", "size", "disabled", "selected", "color"]))), 128))
                      ], 16),
                      s(Q).length === 0 ? (r(), n("div", tl, " No options ")) : S("", !0)
                    ], 16),
                    R(e.$slots, "content-footer")
                  ]),
                  _: 3
                }, 8, ["class"])
              ]),
              default: c(() => [
                R(e.$slots, "input", {
                  popover: b.value,
                  selected: o.value,
                  disabled: k.value,
                  label: B(o.value)
                }, () => [
                  T("div", {
                    class: A([s(h).box])
                  }, [
                    e.multiple && Array.isArray(o.value) && o.value.length > 0 ? (r(), n("div", {
                      key: 0,
                      ref_key: "tagsRef",
                      ref: N,
                      class: A(["flex gap-1 relative", {
                        "flex-wrap": !e.truncate,
                        "overflow-hidden": e.truncate
                      }])
                    }, [
                      (r(!0), n(g, null, M(o.value, (l) => {
                        var i, m, f, v;
                        return r(), $(ne, {
                          key: l,
                          size: "xs",
                          removable: "",
                          outlined: !(k.value || (m = (i = e.options) == null ? void 0 : i.find((w) => w.value === l)) != null && m.disabled),
                          disabled: k.value || ((v = (f = e.options) == null ? void 0 : f.find((w) => w.value === l)) == null ? void 0 : v.disabled),
                          onRemove: (w) => {
                            ee(w, l);
                          }
                        }, {
                          default: c(() => [
                            C(y(B(l)), 1)
                          ]),
                          _: 2
                        }, 1032, ["outlined", "disabled", "onRemove"]);
                      }), 128)),
                      H.value ? (r(), n("div", {
                        key: 0,
                        class: A(s(h).truncateCounter),
                        onClick: t[1] || (t[1] = ze((l) => {
                          var i;
                          return (i = oe.value) == null ? void 0 : i.toggle();
                        }, ["stop"]))
                      }, "+" + y(q.value), 3)) : S("", !0)
                    ], 2)) : !e.multiple && !_(o.value) ? (r(), n(g, { key: 1 }, [
                      C(y(B(o.value)), 1)
                    ], 64)) : (r(), n(g, { key: 2 }, [
                      e.placeholder ? (r(), n("div", el, y(e.placeholder), 1)) : (r(), n("div", ll, " "))
                    ], 64))
                  ], 2)
                ])
              ]),
              _: 3
            }, 8, ["disabled"]),
            e.multiple && e.truncate && H.value ? (r(), $(ue, {
              key: 0,
              ref_key: "multipleHiddenRef",
              ref: oe,
              "popper-show-triggers": [],
              "popper-hide-triggers": [],
              class: "inline-block !absolute right-0",
              placement: "auto-start"
            }, {
              content: c(() => [
                D(de, { class: "p-2 flex gap-2 flex-wrap" }, {
                  default: c(() => {
                    var l;
                    return [
                      (r(!0), n(g, null, M((l = o.value) == null ? void 0 : l.slice(o.value.length - q.value), (i) => {
                        var m, f, v, w;
                        return r(), $(ne, {
                          key: i,
                          size: "xs",
                          removable: "",
                          outlined: !(k.value || (f = (m = e.options) == null ? void 0 : m.find((z) => z.value === i)) != null && f.disabled),
                          disabled: k.value || ((w = (v = e.options) == null ? void 0 : v.find((z) => z.value === i)) == null ? void 0 : w.disabled),
                          onRemove: (z) => {
                            ee(z, i);
                          }
                        }, {
                          default: c(() => [
                            C(y(B(i)), 1)
                          ]),
                          _: 2
                        }, 1032, ["outlined", "disabled", "onRemove"]);
                      }), 128))
                    ];
                  }),
                  _: 1
                })
              ]),
              _: 1
            }, 512)) : S("", !0)
          ], 64)),
          xe(T("select", W({
            id: e.id,
            ref_key: "elRef",
            ref: U,
            "onUpdate:modelValue": t[4] || (t[4] = (l) => o.value = l),
            tabindex: "-1",
            class: e.native && !e.multiple ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
            name: e.name,
            disabled: e.disabled || e.loading,
            multiple: e.multiple,
            readonly: e.readonly
          }, se(s(ie), !0)), [
            e.native ? (r(!0), n(g, { key: 0 }, M(e.options, (l, i) => (r(), n("option", {
              key: i,
              value: l.value,
              disabled: l.disabled
            }, y(l.label), 9, al))), 128)) : S("", !0)
          ], 16, il), [
            [De, o.value]
          ]),
          T("div", {
            class: A(s(h).iconWrapper)
          }, [
            e.loading ? (r(), $(Ke, {
              key: 0,
              size: e.size
            }, null, 8, ["size"])) : R(e.$slots, "icon", { key: 1 }, () => [
              D(je, {
                icon: s(Me),
                class: A([s(h).icon])
              }, null, 8, ["icon", "class"])
            ])
          ], 2)
        ]),
        s(we) ? S("", !0) : (r(), $(Ge, {
          key: 0,
          error: s(te),
          helper: e.helper
        }, null, 8, ["error", "helper"]))
      ]),
      _: 3
    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  Il as default
};
