import { defineComponent as x, ref as r, provide as C, computed as g, resolveComponent as h, openBlock as l, createElementBlock as u, createStaticVNode as F, Fragment as L, renderList as I, createElementVNode as p, toDisplayString as v, createVNode as w, withModifiers as N, onMounted as E, onUnmounted as z, createBlock as M } from "vue";
import { F as b, a as P, ao as R } from "./app-Bpb4394e.js";
import "./dayjs.min-D5mIeZ1x.js";
import "@feedmepos/ui-library";
/* empty css                                                                             */
import "@feedmepos/mf-common";
import "./app-DiX-EfV6.js";
import "./lodash-TzWV2CbR.js";
const U = { class: "" }, D = ["onClick"], O = { class: "flex-grow-0 flex-shrink-0 basis-5/12 py-8 pl-8" }, V = { class: "flex-grow-0 flex-shrink-0 basis-3/12 py-8" }, S = { class: "flex-grow-0 flex-shrink-0 basis-3/12 py-8" }, $ = { class: "flex-grow-0 flex-shrink-0 basis-1/12 py-4" }, T = /* @__PURE__ */ x({
  __name: "binding-ui",
  props: {
    items: { default: () => [] },
    recipes: { default: () => [] },
    skus: { default: () => [] },
    type: { default: "Product" },
    editable: { type: Boolean, default: !1 }
  },
  emits: ["click:open-binding-dialog"],
  setup(_, { emit: a }) {
    const d = r({
      isOpen: !1,
      initialValue: [],
      context: "",
      name: ""
    });
    C("closeDialog", () => {
      d.value.isOpen = !d.value.isOpen;
    });
    const n = _, m = a, f = g(() => n.items.map((s) => ({
      key: s.key,
      name: s.name,
      _skuLinked: s.bindings.filter(
        ({ type: t, id: e }) => t === b.enum.SKU && n.skus.some((c) => c._id === e)
      ).length,
      _recipeLinked: s.bindings.filter(
        ({ type: t, id: e }) => t === b.enum.RECIPE && n.recipes.some((c) => c._id === e)
      ).length,
      onUpdate: async () => {
        n.editable && m("click:open-binding-dialog", n.type, s);
      }
    })));
    return (k, s) => {
      const t = h("FmButton");
      return l(), u("div", U, [
        s[0] || (s[0] = F('<div class="flex font-bold bg-[#F7F8FA]"><div class="flex-grow-0 flex-shrink-0 basis-5/12 py-8"></div><div class="flex-grow-0 flex-shrink-0 basis-3/12 py-8">Ingredient</div><div class="flex-grow-0 flex-shrink-0 basis-3/12 py-8">Recipe</div><div class="flex-grow-0 flex-shrink-0 basis-1/12 py-8"></div></div>', 1)),
        (l(!0), u(L, null, I(f.value, (e) => (l(), u("div", {
          key: e.key,
          class: "cursor-pointer flex border-t border-[rgba(17,32,47,0.15] items-center",
          onClick: e.onUpdate
        }, [
          p("div", O, v(e.name), 1),
          p("div", V, v(e._skuLinked ? `${e._skuLinked} linked` : "Not linked"), 1),
          p("div", S, v(e._recipeLinked ? `${e._recipeLinked} linked` : "Not linked"), 1),
          p("div", $, [
            w(t, {
              variant: "tertiary",
              icon: "edit",
              "icon-color": "#000",
              size: "md",
              disabled: !n.editable,
              type: "button",
              onClick: N(e.onUpdate, ["stop"])
            }, null, 8, ["disabled", "onClick"])
          ])
        ], 8, D))), 128))
      ]);
    };
  }
}), A = {
  key: 1,
  class: "p-24 flex items-center justify-center gap-16"
}, W = /* @__PURE__ */ x({
  __name: "BindingsTable",
  setup(_) {
    const a = P(), d = r(!0), n = r(new Array()), m = g(() => a.recipes), f = g(() => a.skus), k = r(""), s = R(e), t = r();
    async function e() {
      await a.readInventory(), t.value = s.onMessage(
        "props:grouped-bindings",
        (i) => {
          d.value = !1, n.value = i;
        }
      ), s.sendMessage("props:grouped-bindings");
    }
    async function c(i, o) {
      s.sendMessage("@click:open-binding-dialog", {
        key: i,
        binding: o
      });
    }
    const y = r();
    return E(() => {
      const i = y.value;
      i && new ResizeObserver(() => {
        s.sendMessage("resize", i.scrollHeight);
      }).observe(i);
    }), z(() => {
      var i, o;
      (o = (i = t.value) == null ? void 0 : i.removeEventListener) == null || o.call(i);
    }), (i, o) => {
      const B = h("FmCircularProgress");
      return l(), u("div", {
        class: "bg-white",
        ref_key: "resizeableRef",
        ref: y
      }, [
        d.value ? (l(), u("div", A, [
          w(B, { size: "md" }),
          o[0] || (o[0] = p("div", null, "Loading bindings table...", -1))
        ])) : (l(), M(T, {
          key: 0,
          items: n.value,
          recipes: m.value,
          skus: f.value,
          type: k.value,
          editable: "",
          "onClick:openBindingDialog": c
        }, null, 8, ["items", "recipes", "skus", "type"]))
      ], 512);
    };
  }
});
export {
  W as default
};
