import { defineComponent as pe, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as o, createBlock as c, mergeProps as X, toHandlers as H, withCtx as b, createElementVNode as C, createElementBlock as a, normalizeClass as R, Fragment as v, renderList as E, createTextVNode as z, toDisplayString as m, createVNode as K, withDirectives as ve, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
import { useEventListener as he } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
import { useColors as be } from "../../composables/useColors.js";
import { useCommon as G } from "../../composables/useCommon.js";
import { useInputtable as D } from "../../composables/useInputtable.js";
import { useInteractive as J } from "../../composables/useInteractive.js";
import { useTheme as ke } from "../../composables/useTheme.js";
import { checkIcon as ge, selectIcon as we } from "../../common/icons.js";
import Ae from "../label/Label.vue.js";
import W from "../tag/Tag.vue.js";
import Ie from "../icon/Icon.vue.js";
import Re from "../menu/MenuItem.vue.js";
import Ve from "../spinner/Spinner.vue.js";
import _e from "../popover/Popover.vue.js";
import "../popover/Popover.vue3.js";
import $e from "../popover/PopoverContainer.vue.js";
import Ce from "../inputFooter/InputFooter.vue.js";
const Ee = { class: "relative" }, ze = {
  key: 0,
  class: "flex gap-1 flex-wrap"
}, Se = {
  key: 0,
  class: "text-secondary-400 dark:text-secondary-500"
}, Ne = { key: 1 }, Oe = {
  key: 0,
  class: "flex gap-1 flex-wrap"
}, De = {
  key: 0,
  class: "text-secondary-400 dark:text-secondary-500"
}, Le = { key: 1 }, Be = {
  key: 1,
  class: "px-2 text-center text-secondary-400"
}, Te = ["id", "name", "disabled", "multiple", "readonly"], Fe = ["value", "disabled"], Pe = {
  ...be.props("primary"),
  ...G.props(),
  ...J.props(),
  ...D.props(),
  placeholder: String,
  options: Array,
  multiple: Boolean,
  flat: Boolean,
  native: Boolean
}, qe = {
  name: "XSelect",
  validators: {
    ...G.validators()
  }
}, nl = /* @__PURE__ */ pe({
  ...qe,
  props: Pe,
  emits: D.emits(),
  setup(Q, { expose: Y, emit: Z }) {
    const r = Q, V = Z, k = A(null), S = A(null), _ = A(null), f = A(null), u = A(), t = I({
      get() {
        return r.multiple ? r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : [] : r.modelValue;
      },
      set(e) {
        V("update:modelValue", e);
      }
    }), d = I(() => !r.options || r.options.length === 0 ? [] : r.options.map((e) => {
      let i = !1;
      return r.multiple && Array.isArray(t.value) ? i = t.value.includes(e.value) : i = e.value === t.value, {
        value: e.value,
        label: e.label,
        active: i,
        disabled: e.disabled,
        iconRight: i ? ge : void 0,
        onClick: () => T(e.value)
      };
    })), L = I(() => {
      var e;
      return (e = r.options) == null ? void 0 : e.filter((i) => !i.disabled);
    }), y = I(() => {
      var e;
      return (e = f.value) == null ? void 0 : e.isOpen;
    });
    O(y, (e) => {
      e && (ee(), setTimeout(() => {
        B(u.value || 0);
      }, 50), (r.multiple || typeof u.value > "u") && N(-1));
    });
    function ee() {
      if (r.multiple) {
        if (Array.isArray(t.value) && t.value.length > 0) {
          const e = d.value.findIndex((i) => i.value === t.value[0]);
          e !== -1 && (u.value = e);
        }
      } else {
        const e = d.value.findIndex((i) => i.value === t.value);
        e !== -1 && (u.value = e);
      }
    }
    function B(e) {
      var i;
      _.value && ((i = _.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
    }
    O(u, (e) => {
      typeof e < "u" && _.value && B(e);
    });
    function N(e, i = "down") {
      if (!L.value || L.value.length === 0) {
        u.value = void 0;
        return;
      }
      if (typeof e > "u" && (e = i === "down" ? -1 : 1), i === "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 T(e) {
      var l;
      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
      if (!(!i || i.disabled)) {
        if (r.multiple)
          if (Array.isArray(t.value)) {
            const n = t.value.indexOf(e);
            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), V("update:modelValue", t.value));
          } else
            t.value = [e];
        else
          t.value = e;
        r.native || U(() => {
          var n, p, w;
          (n = k.value) == null || n.dispatchEvent(new Event("input")), (p = k.value) == null || p.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
        });
      }
    }
    function F(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 P(e, i) {
      e.stopPropagation();
      const l = t.value.indexOf(i);
      l !== -1 && (t.value.splice(l, 1), V("update:modelValue", t.value));
    }
    function $(e) {
      var l;
      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
      return i ? i.label : "";
    }
    const { focus: q, blur: le } = J(k), {
      errorInternal: j,
      hideFooterInternal: ie,
      inputListeners: x,
      reset: te,
      validate: ne,
      setError: oe,
      isFocused: re,
      isInsideForm: ae
    } = D(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
      const { focus: e, blur: i } = s(x);
      return {
        focus: e,
        blur: i
      };
    });
    let g = null;
    O([re, y], ([e, i]) => {
      e || i ? g || (g = he(document, "keydown", ue)) : g && (g(), g = null);
    }, {
      immediate: !0
    });
    function ue(e) {
      var i, l, n, p, w;
      if (d.value.length !== 0)
        if (e.code === "ArrowDown") {
          if (e.preventDefault(), !y.value) {
            (i = f.value) == null || i.show();
            return;
          }
          N(u.value, "down");
        } else if (e.code === "ArrowUp") {
          if (e.preventDefault(), !y.value) {
            (l = f.value) == null || l.show();
            return;
          }
          N(u.value, "up");
        } else if (e.code === "Enter" || e.code === "Space") {
          if (e.preventDefault(), e.stopPropagation(), !y.value) {
            (n = f.value) == null || n.show();
            return;
          }
          typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (p = f.value) == null || p.hide());
        } else
          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || U(() => {
            var M;
            (M = S.value) == null || M.$el.focus();
          }));
    }
    const { styles: de, classes: h, className: fe } = ke("Select", {}, r, { errorInternal: j });
    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: oe }), (e, i) => (o(), c(Ae, X({
      ref_key: "labelRef",
      ref: S,
      tabindex: "0",
      class: ["group", [
        s(fe),
        s(h).wrapper
      ]],
      style: s(de),
      disabled: e.disabled,
      required: e.required,
      "is-inside-form": s(ae),
      label: e.label,
      tooltip: e.tooltip
    }, H(se.value)), {
      default: b(() => [
        C("div", Ee, [
          e.native && !e.multiple ? (o(), a("div", {
            key: 0,
            class: R(s(h).box),
            onClick: i[0] || (i[0] = (l) => {
              var n;
              return (n = k.value) == null ? void 0 : n.click();
            })
          }, [
            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", ze, [
              (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                key: l,
                size: "xs",
                outlined: "",
                removable: "",
                onRemove: (n) => {
                  P(n, l);
                }
              }, {
                default: b(() => [
                  z(m($(l)), 1)
                ]),
                _: 2
              }, 1032, ["onRemove"]))), 128))
            ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
              z(m($(t.value)), 1)
            ], 64)) : (o(), a(v, { key: 2 }, [
              e.placeholder ? (o(), a("div", Se, m(e.placeholder), 1)) : (o(), a("div", Ne, " "))
            ], 64))
          ], 2)) : (o(), c(_e, {
            key: 1,
            ref_key: "popoverRef",
            ref: f,
            disabled: e.disabled || e.loading || e.readonly
          }, {
            content: b(() => [
              K($e, {
                class: R(s(h).content)
              }, {
                default: b(() => [
                  d.value.length > 0 ? (o(!0), a(v, { key: 0 }, E(d.value, (l, n) => (o(), c(Re, {
                    key: n,
                    ref_for: !0,
                    ref_key: "itemsRef",
                    ref: _,
                    item: l,
                    size: e.size,
                    disabled: l.disabled,
                    selected: n === u.value,
                    color: e.color,
                    filled: "",
                    onClick: i[1] || (i[1] = () => {
                      var p;
                      return !e.multiple && ((p = f.value) == null ? void 0 : p.hide());
                    })
                  }, null, 8, ["item", "size", "disabled", "selected", "color"]))), 128)) : (o(), a("div", Be, " No options "))
                ]),
                _: 1
              }, 8, ["class"])
            ]),
            default: b(() => [
              C("div", {
                class: R([s(h).box])
              }, [
                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", Oe, [
                  (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                    key: l,
                    size: "xs",
                    outlined: "",
                    removable: "",
                    onRemove: (n) => {
                      P(n, l);
                    }
                  }, {
                    default: b(() => [
                      z(m($(l)), 1)
                    ]),
                    _: 2
                  }, 1032, ["onRemove"]))), 128))
                ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
                  z(m($(t.value)), 1)
                ], 64)) : (o(), a(v, { key: 2 }, [
                  e.placeholder ? (o(), a("div", De, m(e.placeholder), 1)) : (o(), a("div", Le, " "))
                ], 64))
              ], 2)
            ]),
            _: 1
          }, 8, ["disabled"])),
          ve(C("select", X({
            id: e.id,
            ref_key: "elRef",
            ref: k,
            "onUpdate:modelValue": i[2] || (i[2] = (l) => t.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
          }, H(s(x), !0)), [
            (o(!0), a(v, null, E(e.options, (l, n) => (o(), a("option", {
              key: n,
              value: l.value,
              disabled: l.disabled
            }, m(l.label), 9, Fe))), 128))
          ], 16, Te), [
            [ce, t.value]
          ]),
          C("div", {
            class: R(s(h).iconWrapper)
          }, [
            e.loading ? (o(), c(Ve, {
              key: 0,
              size: e.size
            }, null, 8, ["size"])) : me(e.$slots, "icon", { key: 1 }, () => [
              K(Ie, {
                icon: s(we),
                class: R([s(h).icon])
              }, null, 8, ["icon", "class"])
            ])
          ], 2)
        ]),
        s(ie) ? ye("", !0) : (o(), c(Ce, {
          key: 0,
          error: s(j),
          helper: e.helper
        }, null, 8, ["error", "helper"]))
      ]),
      _: 3
    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  nl as default
};
