import { defineComponent as S, computed as r, ref as l, onMounted as U, onUnmounted as V, resolveComponent as E, openBlock as p, createElementBlock as f, createVNode as u, createElementVNode as k } from "vue";
import { a as M } from "./FmMultiselectDialog-D-38fV59.js";
import { a as x, ao as z } from "./app-Bpb4394e.js";
const F = {
  key: 0,
  class: "flex flex-col gap-16"
}, K = { class: "flex justify-end gap-8 items-center" }, w = {
  key: 1,
  class: "p-24 flex items-center justify-center gap-16"
}, A = /* @__PURE__ */ S({
  __name: "BindingsPicker",
  setup(L) {
    const d = x(), C = r(() => d.recipes), I = r(() => d.skus), g = l(!0), i = l(new Array()), a = l("RECIPE"), c = r(() => a.value === "SKU" ? I.value.map((s) => ({
      label: s.name,
      sublabel: s.code,
      value: s
    })) : C.value.map((s) => ({
      label: s.name,
      value: s
    }))), b = r({
      get() {
        if (a.value === "SKU") {
          const e = i.value.filter((n) => n.type === "SKU");
          return c.value.filter((n) => e.find((t) => t.id === n.value._id)).map((n) => n.value);
        } else {
          const e = i.value.filter((n) => n.type === "RECIPE");
          return c.value.filter((n) => e.find((t) => t.id === n.value._id)).map((n) => n.value);
        }
      },
      set(e) {
        if (a.value === "RECIPE") {
          const s = i.value.filter((n) => n.type === "SKU");
          e = e, i.value = [
            ...e.map((n) => {
              const t = i.value.find((v) => v.id === n._id);
              return t || {
                type: "RECIPE",
                id: n._id,
                amount: {
                  amount: 1,
                  precision: 0
                }
              };
            }),
            ...s
          ];
        } else {
          e = e;
          const s = i.value.filter((n) => n.type === "RECIPE");
          i.value = [
            ...s,
            ...e.map((n) => {
              const t = i.value.find((v) => v.id === n._id);
              return t || {
                type: "SKU",
                id: n._id,
                amount: {
                  amount: 0,
                  precision: 0
                }
              };
            })
          ];
        }
      }
    }), _ = l(), o = z(B);
    async function B() {
      await d.readInventory(), _.value = o.onMessage(
        "props:binding-items",
        (e) => {
          g.value = !1, a.value = e.type, i.value = e.bindings;
        }
      ), o.sendMessage("props:binding-items");
    }
    function P() {
      o.sendMessage("@close");
    }
    function R() {
      o.sendMessage("@submit:items", i.value);
    }
    const y = l();
    return U(() => {
      const e = y.value;
      e && new ResizeObserver(() => {
        o.sendMessage("resize", e.scrollHeight);
      }).observe(e);
    }), V(() => {
      var e, s;
      (s = (e = _.value) == null ? void 0 : e.removeEventListener) == null || s.call(e);
    }), (e, s) => {
      const n = E("FmButton"), t = E("FmCircularProgress");
      return p(), f("div", {
        class: "bg-white",
        ref_key: "resizeableRef",
        ref: y
      }, [
        g.value ? (p(), f("div", w, [
          u(t, { size: "md" }),
          s[1] || (s[1] = k("div", null, "Loading bindings dialog...", -1))
        ])) : (p(), f("div", F, [
          u(M, {
            "model-value": b.value,
            "onUpdate:modelValue": s[0] || (s[0] = (m) => b.value = m),
            items: c.value
          }, null, 8, ["model-value", "items"]),
          k("div", K, [
            u(n, {
              variant: "tertiary",
              label: "Close",
              onClick: P
            }),
            u(n, {
              label: "Submit",
              onClick: R
            })
          ])
        ]))
      ], 512);
    };
  }
});
export {
  A as default
};
