import { defineComponent as le, ref as V, computed as F, resolveComponent as x, createBlock as T, openBlock as g, unref as n, withCtx as p, createElementVNode as a, createVNode as l, createElementBlock as E, toDisplayString as S, Fragment as z, renderList as Q, withModifiers as ae, createCommentVNode as ce, createTextVNode as fe, h as R } from "vue";
import { useI18n as se } from "@feedmepos/mf-common";
import { components as de, useBreakpoints as be, useSnackbar as ye, useDialog as ke } from "@feedmepos/ui-library";
import { _ as he } from "./ResponsiveFabButton.vue_vue_type_script_setup_true_lang-Cn-3MRBO.js";
import { _ as xe } from "./app-D-J2cjak.js";
import { I as ee, J as me, M as re, A as oe, u as Ce, Q as we, G as Fe, a5 as Ve } from "./index.vue_vue_type_script_setup_true_lang-BMVa5UfU.js";
import { d as Se } from "./vuedraggable-CK8z7qA8.js";
import { _ as Z } from "./RuleView.vue_vue_type_script_setup_true_lang-DRUQOy4h.js";
import { u as pe } from "./discardConfirm-BHni0LNu.js";
import { L as Ie } from "./LinkProductSideSheet-DUHaljek.js";
import { _ as $e } from "./PageLayout.vue_vue_type_script_setup_true_lang-2f0QfweQ.js";
const Oe = { class: "flex items-center gap-8" }, Ee = { class: "grow" }, Ke = { class: "space-y-32" }, Le = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Ne = { class: "px-16 py-8 w-[40%]" }, De = { class: "px-16 py-8 grow" }, Ge = { class: "px-16 py-8 w-[40%]" }, Me = { class: "px-16 py-8 grow" }, Ue = { class: "space-y-16" }, Be = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, Te = { class: "flex gap-8 items-center justify-start" }, ze = /* @__PURE__ */ le({
  __name: "CookingGuideStepDialog",
  emits: ["onComplete"],
  setup(G, { expose: _, emit: X }) {
    const { t: r } = se();
    _({
      show: s,
      hide: O
    });
    const P = X;
    function D() {
      return {
        id: "",
        variables: {},
        instruction: ""
      };
    }
    const C = V(!1), A = V(!1), $ = V(void 0);
    function s(v) {
      A.value = !!v, $.value = v ? ee(v) : D(), c.value = ee($.value), w.value = Object.entries(c.value.variables).map(
        ([t, f]) => ({ key: t, value: f })
      ), C.value = !0;
    }
    function O() {
      C.value = !1;
    }
    const c = V(D()), w = V([]);
    function q() {
      w.value.push({ key: "", value: "" });
    }
    function H(v) {
      w.value.splice(v, 1);
    }
    function j(v) {
      const t = document.activeElement;
      if (t && t.tagName === "TEXTAREA") {
        const f = t.selectionStart, L = t.selectionEnd, M = c.value.instruction, I = M.substring(0, f) + `{{${v}}}` + M.substring(L);
        c.value = {
          ...c.value,
          instruction: I
        }, setTimeout(() => {
          t.focus();
          const Y = f + `{{${v}}}`.length;
          t.setSelectionRange(Y, Y);
        }, 0);
      } else
        c.value = {
          ...c.value,
          instruction: `${c.value.instruction}{{${v}}}`
        };
    }
    const k = F(() => w.value.reduce(
      (v, { key: t }) => (t && v.every((f) => f.label !== t) && v.push({
        label: t
      }), v),
      []
    )), h = F(() => A.value ? r("menu.cooking_guide.step_dialog.update.title") : r("menu.cooking_guide.step_dialog.add.title")), K = F(() => A.value ? r("menu.cooking_guide.step_dialog.update.action") : r("menu.cooking_guide.step_dialog.add.action"));
    V();
    const i = pe(
      () => !me.isEqual(
        {
          ...c.value,
          variables: w.value.reduce((v, { key: t, value: f }) => ({ ...v, [t]: f }), {})
        },
        $.value
      ),
      () => {
        C.value = !1;
      }
    );
    function u() {
      O(), P("onComplete", {
        ...c.value,
        variables: w.value.reduce((v, { key: t, value: f }) => ({ ...v, [t]: f }), {})
      });
    }
    return (v, t) => {
      const f = x("FmButton"), L = x("FmTextField"), M = x("FmChip"), I = x("FmTextarea"), Y = x("FmSideSheet");
      return g(), T(Y, {
        modelValue: C.value,
        "onUpdate:modelValue": t[1] || (t[1] = (U) => C.value = U),
        closeButton: !1,
        header: h.value,
        "max-width": 560,
        "is-container": n(de).FmForm,
        "is-container-props": {
          onValidationSuccess: u,
          blameFormChildOnValidationFailed: !0,
          class: "flex flex-col h-full"
        },
        "onOn:clickedAway": n(i)
      }, {
        "side-sheet-header": p(() => [
          a("div", Oe, [
            l(f, {
              icon: "arrow_back",
              variant: "tertiary",
              label: n(r)("menu.cooking_guide.step_dialog.actions.back"),
              onClick: O
            }, null, 8, ["label"]),
            a("div", Ee, S(h.value), 1)
          ])
        ]),
        "side-sheet-footer": p(() => [
          a("div", Te, [
            l(f, {
              label: K.value,
              size: "lg",
              variant: "primary",
              type: "submit"
            }, null, 8, ["label"]),
            l(f, {
              label: n(r)("menu.cooking_guide.step_dialog.actions.cancel"),
              size: "lg",
              variant: "tertiary",
              onClick: O
            }, null, 8, ["label"])
          ])
        ]),
        default: p(() => [
          a("div", Ke, [
            l(Z, {
              title: n(r)("menu.cooking_guide.step_dialog.sections.variables.title")
            }, {
              "append-title": p(() => [
                l(f, {
                  icon: "add",
                  label: n(r)("menu.cooking_guide.step_dialog.sections.variables.add"),
                  variant: "secondary",
                  "text-color": "primary",
                  "border-color": "primary",
                  onClick: q
                }, null, 8, ["label"])
              ]),
              default: p(() => [
                a("div", null, [
                  a("div", Le, [
                    a("div", Ne, S(n(r)("menu.cooking_guide.step_dialog.sections.variables.columns.key")), 1),
                    a("div", De, S(n(r)("menu.cooking_guide.step_dialog.sections.variables.columns.value")), 1)
                  ]),
                  (g(!0), E(z, null, Q(w.value, (U, B) => (g(), E("div", {
                    key: B,
                    class: "flex items-center border-b border-b-fm-color-neutral-gray-100"
                  }, [
                    a("div", Ge, [
                      l(L, {
                        modelValue: w.value[B].key,
                        "onUpdate:modelValue": (N) => w.value[B].key = N,
                        rules: [
                          (N) => !!N || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.required"),
                          (N) => !N || /^[a-z]+$/.test(N) || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.lowercase"),
                          (N) => !N || w.value.findIndex((ue) => ue.key === N) === B || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.duplicate")
                        ],
                        placeholder: n(r)("menu.cooking_guide.step_dialog.sections.variables.placeholders.key")
                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
                    ]),
                    a("div", Me, [
                      l(L, {
                        modelValue: w.value[B].value,
                        "onUpdate:modelValue": (N) => w.value[B].value = N,
                        rules: [
                          (N) => !!N || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.required")
                        ],
                        placeholder: n(r)("menu.cooking_guide.step_dialog.sections.variables.placeholders.value")
                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
                    ]),
                    l(f, {
                      icon: "delete",
                      variant: "tertiary",
                      "text-color": "neutral-gray-400",
                      onClick: () => H(B)
                    }, null, 8, ["onClick"])
                  ]))), 128))
                ])
              ]),
              _: 1
            }, 8, ["title"]),
            l(Z, {
              title: n(r)("menu.cooking_guide.step_dialog.sections.instruction.title")
            }, {
              default: p(() => [
                a("div", Ue, [
                  a("div", Be, [
                    (g(!0), E(z, null, Q(k.value, (U) => (g(), T(M, {
                      key: U.label,
                      label: U.label,
                      class: "text-fm-color-primary bg-fm-color-system-warning-100",
                      onMousedown: ae(() => j(U.label), ["prevent"])
                    }, null, 8, ["label", "onMousedown"]))), 128))
                  ]),
                  l(I, {
                    modelValue: c.value.instruction,
                    "onUpdate:modelValue": t[0] || (t[0] = (U) => c.value.instruction = U),
                    ref: "textareaRef"
                  }, null, 8, ["modelValue"])
                ])
              ]),
              _: 1
            }, 8, ["title"])
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]);
    };
  }
}), Ae = { class: "w-[700px]" }, Re = { class: "flex bg-fm-color-neutral-gray-100" }, Pe = { class: "px-16 py-8 grow" }, qe = { class: "px-16 py-8 w-[200px]" }, je = { class: "px-16 py-8 w-[200px]" }, Ye = { class: "px-16 py-8 grow" }, Je = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, Qe = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, Xe = /* @__PURE__ */ le({
  __name: "CookingGuideStepOverrideDialog",
  emits: ["onComplete"],
  setup(G, { expose: _, emit: X }) {
    const { t: r } = se();
    _({
      show: s,
      hide: O
    });
    const P = X;
    function D() {
      return {
        productId: "",
        overrides: []
      };
    }
    const C = V(!1), A = V(""), $ = V([]);
    function s(k) {
      A.value = k.itemName, $.value = k.steps, c.value = k.bindings ? ee(k.bindings) : D(), C.value = !0;
    }
    function O() {
      C.value = !1;
    }
    const c = V(D()), w = F(() => c.value.overrides.reduce((k, h) => (k[h.id] = h, k), {}));
    function q(k, h) {
      var K;
      return ((K = w.value[k]) == null ? void 0 : K.variables[h]) ?? "";
    }
    function H(k, h, K) {
      const i = c.value.overrides.findIndex((u) => u.id === k);
      K ? i < 0 ? c.value.overrides.push({
        id: k,
        variables: { [h]: K }
      }) : c.value.overrides[i].variables[h] = K : i >= 0 && (delete c.value.overrides[i].variables[h], Object.keys(c.value.overrides[i].variables).length || c.value.overrides.splice(i, 1));
    }
    function j() {
      O(), P("onComplete", c.value);
    }
    return (k, h) => {
      const K = x("FmTextField"), i = x("FmSpacer"), u = x("FmButton"), v = x("FmDialog");
      return g(), T(v, {
        modelValue: C.value,
        "onUpdate:modelValue": h[0] || (h[0] = (t) => C.value = t),
        overlay: !0,
        contentClass: "test",
        "min-width": "min(calc(100% - 48px), 748px)"
      }, {
        "dialog-header": p(() => [
          a("div", null, S(n(r)("menu.cooking_guide.step_override_dialog.title")), 1)
        ]),
        "dialog-footer": p(() => [
          l(i),
          l(u, {
            class: "sm:w-full xs:w-full",
            label: n(r)("menu.cooking_guide.step_override_dialog.actions.cancel"),
            size: "md",
            variant: "tertiary",
            onClick: O
          }, null, 8, ["label"]),
          l(u, {
            class: "sm:w-full xs:w-full",
            label: n(r)("menu.cooking_guide.step_override_dialog.actions.save"),
            size: "md",
            variant: "primary",
            onClick: j
          }, null, 8, ["label"])
        ]),
        default: p(() => [
          a("div", Ae, [
            a("div", Re, [
              a("div", Pe, S(n(r)("menu.cooking_guide.step_override_dialog.columns.instructions")), 1),
              a("div", qe, S(n(r)("menu.cooking_guide.step_override_dialog.columns.variables")), 1),
              a("div", je, S(n(r)("menu.cooking_guide.step_override_dialog.columns.value")), 1)
            ]),
            (g(!0), E(z, null, Q($.value, (t) => (g(), E("div", {
              key: t.id,
              class: "flex border-t-2"
            }, [
              a("div", Ye, S(t.instruction), 1),
              a("div", Je, [
                (g(!0), E(z, null, Q(t.variables, (f, L) => (g(), E("div", {
                  key: L,
                  class: "py-8 w-full text-ellipsis overflow-hidden whitespace-nowrap"
                }, S(L), 1))), 128))
              ]),
              a("div", Qe, [
                (g(!0), E(z, null, Q(t.variables, (f, L) => (g(), E("div", { key: L }, [
                  l(K, {
                    "model-value": q(t.id, L.toString()),
                    placeholder: f,
                    "onUpdate:modelValue": (M) => H(t.id, L.toString(), M)
                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
                ]))), 128))
              ])
            ]))), 128))
          ])
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
}), He = { class: "fm-typo-en-title-md-600" }, We = { class: "space-y-24" }, Ze = { class: "flex items-center" }, eo = { class: "flex-1" }, oo = { class: "flex items-center gap-8" }, to = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, no = { class: "flex-1" }, io = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, ao = { class: "px-16 py-8 flex-1 flex gap-4 overflow-auto min-w-0" }, lo = { class: "fm-typo-en-body-md-500" }, so = { class: "px-16 py-8 flex gap-8" }, uo = { class: "flex gap-8 items-center justify-start" }, ro = /* @__PURE__ */ le({
  __name: "CookingGuideDialog",
  props: {
    categorizedItems: {
      type: Array,
      required: !0
    },
    canApplyItems: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["onSave"],
  setup(G, { expose: _, emit: X }) {
    const r = G;
    _({
      showModal: A,
      hideModal: $
    });
    function P() {
      return {
        _id: "",
        name: "",
        bindings: [],
        steps: []
      };
    }
    const D = V(!1), C = V(void 0);
    function A(e) {
      C.value = e ? ee(e) : P(), s.value = ee(C.value), D.value = !0;
    }
    function $() {
      D.value = !1;
    }
    const s = V(P()), O = V();
    function c() {
      var e;
      (e = O.value) == null || e.show();
    }
    function w(e) {
      var o;
      (o = O.value) == null || o.show(e);
    }
    function q(e) {
      s.value.steps.splice(e, 1);
    }
    function H(e) {
      if (!e.id)
        s.value.steps.push({ ...e, id: (/* @__PURE__ */ new Date()).toISOString() });
      else {
        const o = s.value.steps.findIndex(({ id: b }) => e.id === b);
        o >= 0 && s.value.steps.splice(o, 1, e);
      }
    }
    function j(e) {
      s.value = {
        ...s.value,
        bindings: e
      };
    }
    function k(e, o) {
      return s.value.bindings.find(
        (d) => d.productId === e && d.combinationKey == o
      );
    }
    function h({ items: e }) {
      const o = e.reduce((d, m) => (d[m._id] = d[m._id] ?? [], m.combinationKey && (d[m._id] = [...d[m._id], m.combinationKey]), d), {}), b = Object.entries(o).reduce(
        (d, [m, W]) => {
          var te;
          return d = W.length > 0 ? [
            ...d,
            ...W.map((ne) => {
              var ie;
              return {
                productId: m,
                combinationKey: ne,
                overrides: ((ie = k(m, ne)) == null ? void 0 : ie.overrides) ?? []
              };
            })
          ] : [
            ...d,
            {
              productId: m,
              overrides: ((te = k(m)) == null ? void 0 : te.overrides) ?? []
            }
          ], d;
        },
        []
      );
      j(b);
    }
    const K = V();
    function i(e) {
      var o;
      (o = K.value) == null || o.show({
        itemName: e.itemName,
        steps: s.value.steps,
        bindings: k(e.itemId, e.combinationKey)
      });
    }
    function u({ productId: e, combinationKey: o, overrides: b }) {
      const d = s.value.bindings.map((m) => ({
        ...m,
        overrides: m.productId === e && m.combinationKey == o ? b : m.overrides
      }));
      j(d);
    }
    function v(e) {
      const o = s.value.bindings.findIndex(
        (b) => b.productId === e.itemId && e.combinationKey == b.combinationKey
      );
      o >= 0 && s.value.bindings.splice(o, 1);
    }
    const { t } = se(), f = F(() => s.value._id ? t("menu.cooking_guide.dialog.update.title") : t("menu.cooking_guide.dialog.add.title")), L = F(() => s.value._id ? t("menu.cooking_guide.dialog.update.action") : t("menu.cooking_guide.dialog.add.action")), M = F(() => s.value.bindings.length), I = F(
      () => s.value.bindings.reduce((e, o) => {
        const b = e[o.productId] ?? [];
        return o.combinationKey ? e[o.productId] = [...b, o.combinationKey] : e[o.productId] = [], e;
      }, {})
    ), Y = V(""), U = F(() => r.categorizedItems.reduce((e, o) => {
      var b, d;
      for (const m of o.items)
        (b = m.variant) != null && b.variantGroupIds.length && ((d = m.variant) == null ? void 0 : d.variantGroupIds.length) > 0 ? e = [
          ...e,
          ...m.variant.variantCombinations.map((W) => ({
            categoryId: o.id,
            categoryName: o.name,
            itemId: m._id,
            itemCode: m.code,
            itemName: `${m.name} - ${W.codeName}`,
            combinationKey: W.combinationKey
          }))
        ] : e.push({
          categoryId: o.id,
          categoryName: o.name,
          itemId: m._id,
          itemCode: m.code,
          itemName: m.name
        });
      return e;
    }, [])), B = F(() => U.value.filter((e) => {
      const o = I.value[e.itemId];
      return !!o && (!e.combinationKey || o.includes(e.combinationKey));
    })), N = F(() => {
      const e = Y.value.toLowerCase();
      return e ? B.value.filter(
        (o) => {
          var b;
          return ((b = o.itemCode) == null ? void 0 : b.toLowerCase().includes(e)) || o.itemName.toLowerCase().includes(e) || o.categoryName.toLowerCase().includes(e);
        }
      ) : B.value;
    }), ue = F(() => N.value.reduce(
      (e, o) => {
        const b = e.findIndex((d) => d.id === o.categoryId);
        return b < 0 ? e.push({
          id: o.categoryId,
          name: o.categoryName,
          items: [o]
        }) : e[b] = {
          ...e[b],
          items: [...e[b].items, o]
        }, e;
      },
      []
    )), ge = X;
    V();
    const _e = pe(
      () => !me.isEqual(C.value, s.value),
      () => {
        D.value = !1;
      }
    );
    function ve() {
      $(), ge("onSave", s.value);
    }
    return (e, o) => {
      const b = x("FmTextField"), d = x("FmButton"), m = x("FmCardSection"), W = x("FmCard"), te = x("FmSpacer"), ne = x("FmSearch"), ie = x("FmSideSheet");
      return g(), E(z, null, [
        l(ie, {
          modelValue: D.value,
          "onUpdate:modelValue": o[4] || (o[4] = (y) => D.value = y),
          header: f.value,
          "max-width": 560,
          "is-container": n(de).FmForm,
          "is-container-props": {
            onValidationSuccess: ve,
            blameFormChildOnValidationFailed: !0,
            class: "flex flex-col h-full py-16"
          },
          "onOn:clickedAway": n(_e)
        }, {
          "side-sheet-header": p(() => [
            a("span", He, S(f.value), 1)
          ]),
          "side-sheet-footer": p(() => [
            a("div", uo, [
              l(d, {
                variant: "primary",
                label: L.value,
                size: "lg",
                type: "submit"
              }, null, 8, ["label"]),
              l(d, {
                variant: "tertiary",
                label: n(t)("menu.cooking_guide.dialog.actions.cancel"),
                size: "lg",
                onClick: $
              }, null, 8, ["label"])
            ])
          ]),
          default: p(() => [
            a("div", We, [
              l(Z, {
                title: n(t)("menu.cooking_guide.dialog.sections.guide_detail.title")
              }, {
                default: p(() => [
                  l(b, {
                    autofocus: "",
                    modelValue: s.value.name,
                    "onUpdate:modelValue": o[0] || (o[0] = (y) => s.value.name = y),
                    label: n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.label"),
                    placeholder: n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.placeholder"),
                    rules: [
                      (y) => !!y || n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.required")
                    ]
                  }, null, 8, ["modelValue", "label", "placeholder", "rules"])
                ]),
                _: 1
              }, 8, ["title"]),
              l(Z, {
                title: n(t)("menu.cooking_guide.dialog.sections.steps.title")
              }, {
                "append-title": p(() => [
                  l(d, {
                    label: n(t)("menu.cooking_guide.dialog.sections.steps.add"),
                    variant: "secondary",
                    "text-color": "primary",
                    "border-color": "primary",
                    icon: "add",
                    onClick: c
                  }, null, 8, ["label"])
                ]),
                default: p(() => [
                  l(n(Se), {
                    modelValue: s.value.steps,
                    "onUpdate:modelValue": o[1] || (o[1] = (y) => s.value.steps = y),
                    handle: ".handle",
                    "item-key": "id"
                  }, {
                    item: p(({ element: y, index: J }) => [
                      l(W, {
                        variant: "outlined",
                        class: "rounded-md mb-16 items-center",
                        horizontal: "",
                        onClick: () => w(y)
                      }, {
                        default: p(() => [
                          a("div", Ze, [
                            l(d, {
                              class: "handle",
                              icon: "drag_handle",
                              variant: "tertiary"
                            }),
                            a("p", eo, S(y.name), 1)
                          ]),
                          l(m, { class: "grow" }, {
                            default: p(() => [
                              fe(S(y.instruction), 1)
                            ]),
                            _: 2
                          }, 1024),
                          l(d, {
                            icon: "delete",
                            variant: "tertiary",
                            onClick: ae(() => q(J), ["stop"])
                          }, null, 8, ["onClick"])
                        ]),
                        _: 2
                      }, 1032, ["onClick"])
                    ]),
                    _: 1
                  }, 8, ["modelValue"])
                ]),
                _: 1
              }, 8, ["title"]),
              G.canApplyItems ? (g(), T(Z, {
                key: 0,
                title: n(t)("menu.cooking_guide.dialog.sections.apply_product.title")
              }, {
                "append-title": p(() => [
                  l(te),
                  l(Ie, {
                    "categorized-items": G.categorizedItems,
                    "initial-value": s.value.bindings.map((y) => ({
                      _id: y.productId,
                      combinationKey: y.combinationKey
                    })),
                    "select-variant": !0,
                    "show-variant": !0,
                    "show-addon": !1,
                    onSubmit: o[2] || (o[2] = (y) => h(y))
                  }, {
                    default: p(({ trigger: y }) => [
                      l(d, {
                        icon: "link",
                        label: n(t)("menu.scheduler.dialog.sections.products.link"),
                        variant: "secondary",
                        "text-color": "primary",
                        "border-color": "primary",
                        onClick: y
                      }, null, 8, ["label", "onClick"])
                    ]),
                    _: 1
                  }, 8, ["categorized-items", "initial-value"])
                ]),
                default: p(() => [
                  a("div", oo, [
                    a("div", to, S(n(t)("menu.cooking_guide.dialog.sections.apply_product.products_linked", {
                      count: M.value
                    })), 1),
                    a("div", no, [
                      l(ne, {
                        modelValue: Y.value,
                        "onUpdate:modelValue": o[3] || (o[3] = (y) => Y.value = y),
                        placeholder: n(t)("menu.cooking_guide.dialog.sections.apply_product.search")
                      }, null, 8, ["modelValue", "placeholder"])
                    ])
                  ]),
                  (g(!0), E(z, null, Q(ue.value, (y) => (g(), E("div", {
                    key: y.id || ""
                  }, [
                    a("div", io, S(y.name), 1),
                    (g(!0), E(z, null, Q(y.items, (J) => (g(), E("div", {
                      key: J.itemId,
                      class: "flex items-center"
                    }, [
                      a("div", ao, [
                        a("span", lo, S((J.itemCode ? `${J.itemCode} ` : "") + J.itemName), 1)
                      ]),
                      a("div", so, [
                        l(d, {
                          icon: "edit",
                          variant: "tertiary",
                          onClick: () => i(J)
                        }, null, 8, ["onClick"]),
                        l(d, {
                          icon: "delete",
                          variant: "tertiary",
                          onClick: () => v(J)
                        }, null, 8, ["onClick"])
                      ])
                    ]))), 128))
                  ]))), 128))
                ]),
                _: 1
              }, 8, ["title"])) : ce("", !0)
            ])
          ]),
          _: 1
        }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]),
        l(ze, {
          ref_key: "cookingGuideStepDialogRef",
          ref: O,
          onOnComplete: H
        }, null, 512),
        l(Xe, {
          ref_key: "cookingGuideStepOverrideDialogRef",
          ref: K,
          onOnComplete: u
        }, null, 512)
      ], 64);
    };
  }
});
function co(G) {
  return {
    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
    operation: re.F_OPERATION_TYPE.create,
    data: oe.FdoMenuCookingGuide.parse(G)
  };
}
function mo(G) {
  return {
    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
    operation: re.F_OPERATION_TYPE.update,
    data: oe.FdoMenuCookingGuide.parse(G)
  };
}
function po(G) {
  return {
    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
    operation: re.F_OPERATION_TYPE.delete,
    data: G._id
  };
}
const go = {
  class: "flex flex-1 justify-end"
}, _o = {
  class: "flex justify-end items-center"
}, vo = {
  class: "grow space-y-4"
}, fo = {
  class: "fm-typo-en-body-lg-600"
}, bo = {
  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
}, yo = {
  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
}, Eo = /* @__PURE__ */ le({
  __name: "CookingGuide",
  setup(G) {
    const {
      t: _
    } = se(), X = be(), r = F(() => X.breakpoints.value.xs), P = F(() => [{
      accessorKey: "name",
      header: () => _("menu.cooking_guide.table.columns.name"),
      cell: (i) => i.getValue(),
      enableSorting: !1
    }, {
      accessorKey: "bindings",
      header: () => _("menu.cooking_guide.table.columns.products"),
      cell: (i) => {
        const u = i.getValue();
        return _("menu.cooking_guide.table.columns.products", {
          count: u.length
        });
      },
      enableSorting: !1
    }, {
      accessorKey: "steps",
      header: () => _("menu.cooking_guide.table.columns.steps"),
      cell: (i) => {
        const u = i.getValue();
        return _("menu.cooking_guide.table.columns.steps", {
          count: u.length
        });
      },
      enableSorting: !1
    }, {
      accessorKey: "_id",
      header: "",
      size: 52,
      meta: {
        cellClass: "pl-16",
        headerContentClass: "-mx-16"
      },
      enableSorting: !1,
      cell: (i) => R("div", {
        class: "flex justify-end"
      }, [R(de.FmButton, {
        icon: "delete",
        textColor: "neutral-gray-400",
        variant: "tertiary",
        onClick: ae(() => {
          k(i.row.original);
        }, ["stop", "prevent"])
      })])
    }]), D = Ce(), C = F(() => O.checkMenuIsLoading()), A = F(() => D.categorizedItems), $ = F(() => D.state.menu.modules.cookingGuide), s = F(() => $.value.length > 0), O = we(Fe(ye())), c = V();
    function w() {
      var i;
      C.value || (i = c.value) == null || i.showModal();
    }
    function q(i) {
      var u;
      C.value || (u = c.value) == null || u.showModal(i);
    }
    async function H(i) {
      const u = i._id ? mo(i) : co(i);
      await O.updateMenu(u, i.name);
    }
    const j = ke();
    async function k(i) {
      let u = [R("span", _("menu.cooking_guide.dialogs.remove.message.prefix")), R("span", {
        class: "fm-typo-en-body-lg-600"
      }, i.name), R("span", "?")];
      i.bindings.length && (u = [R("span", _("menu.cooking_guide.dialogs.remove.message.products_using")), R("span", {
        class: "fm-typo-en-body-lg-600"
      }, i.bindings.length), R("span", _("menu.cooking_guide.dialogs.remove.message.products_count")), ...u]), j.open({
        title: _("menu.cooking_guide.dialogs.remove.title"),
        contentComponent: R("div", u),
        primaryActions: {
          text: _("menu.cooking_guide.actions.remove"),
          close: !0,
          variant: "destructive"
        },
        secondaryActions: {
          text: _("menu.cooking_guide.actions.cancel"),
          close: !0
        }
      }).onPrimary(async () => {
        await O.updateMenu(po(i), i.name, !0);
      });
    }
    const h = V(""), K = F(() => {
      const i = h.value.toLowerCase();
      return i ? $.value.filter((u) => u.name.toLowerCase().includes(i)) : $.value;
    });
    return (i, u) => {
      const v = x("FmSearch"), t = x("FmTable"), f = x("FmButton"), L = x("FmListItem"), M = x("FmList");
      return g(), T($e, {
        heading: n(_)("menu.cooking_guide.title")
      }, {
        "append-heading": p(() => [a("div", go, [s.value ? (g(), T(he, {
          key: 0,
          disabled: C.value,
          icon: "add",
          label: n(_)("menu.cooking_guide.actions.add"),
          variant: "primary",
          onClick: u[0] || (u[0] = () => w())
        }, null, 8, ["disabled", "label"])) : ce("", !0)])]),
        default: p(() => [s.value ? (g(), E(z, {
          key: 1
        }, [a("div", _o, [l(v, {
          modelValue: h.value,
          "onUpdate:modelValue": u[1] || (u[1] = (I) => h.value = I),
          autofocus: "",
          class: "my-8 w-[320px] xs:w-full xs:px-16",
          placeholder: n(_)("menu.cooking_guide.table.search.placeholder")
        }, null, 8, ["modelValue", "placeholder"])]), r.value ? (g(), T(M, {
          key: 1,
          class: "w-full px-16 flex-1 min-h-0 overflow-scroll pb-64",
          separator: ""
        }, {
          default: p(() => [(g(!0), E(z, null, Q(K.value, (I) => (g(), T(L, {
            key: I._id,
            label: I.name,
            style: {
              padding: "12px 0 !important"
            },
            onClick: () => q(I)
          }, {
            default: p(() => [a("div", vo, [a("div", fo, S(I.name), 1), a("div", null, [a("div", bo, S(n(_)("menu.cooking_guide.table.mobile.products_linked", {
              count: I.bindings.length
            })), 1), a("div", yo, S(n(_)("menu.cooking_guide.table.columns.steps", {
              count: I.steps.length
            })), 1)])]), l(f, {
              disabled: C.value,
              icon: "delete",
              variant: "tertiary",
              "text-color": "neutral-gray-400",
              onClick: ae(() => k(I), ["stop"])
            }, null, 8, ["disabled", "onClick"])]),
            _: 2
          }, 1032, ["label", "onClick"]))), 128))]),
          _: 1
        })) : (g(), T(xe, {
          key: 0
        }, {
          default: p(() => [l(t, {
            "column-defs": P.value,
            loading: C.value,
            "page-size": $.value.length,
            "row-data": $.value,
            "search-value": h.value,
            shrinkAt: !1,
            "hide-footer": "",
            "pin-header-row": "",
            onRowClick: u[2] || (u[2] = (I) => q(I.original))
          }, null, 8, ["column-defs", "loading", "page-size", "row-data", "search-value"])]),
          _: 1
        }))], 64)) : (g(), T(n(Ve), {
          key: 0,
          action: {
            text: n(_)("menu.cooking_guide.empty.action"),
            callback: () => w()
          },
          subtitle: n(_)("menu.cooking_guide.empty.subtitle"),
          title: n(_)("menu.cooking_guide.empty.title")
        }, null, 8, ["action", "subtitle", "title"])), l(ro, {
          ref_key: "cookingGuideDialogRef",
          ref: c,
          "categorized-items": A.value,
          onOnSave: H
        }, null, 8, ["categorized-items"])]),
        _: 1
      }, 8, ["heading"]);
    };
  }
});
export {
  Eo as default
};
