import { defineComponent as g, mergeModels as I, useModel as z, computed as b, ref as _, resolveComponent as n, openBlock as o, createElementBlock as h, normalizeStyle as B, createElementVNode as f, createVNode as N, withCtx as E, createBlock as s, createCommentVNode as F, Fragment as S, renderList as R, unref as r } from "vue";
import { z as u } from "./app-D3gm3Lsw.js";
import { F as T } from "./FmMultiselectDialog-BTNJvhnt.js";
const q = { class: "overflow-y-auto h-full pb-8" }, L = /* @__PURE__ */ g({
  __name: "FmFilterableMenuOptions",
  props: /* @__PURE__ */ I({
    modelValue: {},
    maxHeight: {},
    width: {},
    handleItemChange: { type: Function },
    items: {},
    options: {}
  }, {
    search: {},
    searchModifiers: {}
  }),
  emits: ["update:search"],
  setup(i) {
    const k = i, l = z(i, "search"), y = b(
      () => new T(k.items, ["label", "sublabel"], {
        caseSensitive: !1,
        sort: !0
      })
    ), m = b(() => y.value.search(l.value)), V = _();
    return (t, a) => {
      const w = n("FmButton"), C = n("FmTextField"), d = n("FmMenuItem");
      return o(), h("div", {
        class: "relative",
        style: B({ width: t.width })
      }, [
        f("div", {
          class: "sticky top-0 bg-white mb-8",
          ref_key: "stickyRef",
          ref: V
        }, [
          N(C, {
            modelValue: l.value,
            "onUpdate:modelValue": a[1] || (a[1] = (e) => l.value = e),
            placeholder: "Filter options"
          }, {
            append: E(() => [
              l.value ? (o(), s(w, {
                key: 0,
                variant: "tertiary",
                "prepend-icon": "close",
                onClick: a[0] || (a[0] = (e) => l.value = "")
              })) : F("", !0)
            ]),
            _: 1
          }, 8, ["modelValue"])
        ], 512),
        f("div", q, [
          (o(!0), h(S, null, R(m.value, (e, M) => (o(), s(d, {
            key: M,
            label: e.label,
            sublabel: e.sublabel,
            "model-value": r(u)(t.modelValue, e.value),
            onClick: () => t.handleItemChange(r(u)(t.modelValue, e.value), e),
            onVnodeMounted: (c) => {
              var v, p;
              return r(u)(t.modelValue, e.value) && ((v = c.el) == null || v.scrollIntoView({ behavior: "instant", block: "end" }), (p = c.el) == null || p.scrollIntoView({ behavior: "smooth", block: "center" })), void 0;
            }
          }, null, 8, ["label", "sublabel", "model-value", "onClick", "onVnodeMounted"]))), 128)),
          m.value.length ? F("", !0) : (o(), s(d, {
            key: 0,
            disabled: "",
            label: "No options available"
          }))
        ])
      ], 4);
    };
  }
});
export {
  L as _
};
