import { defineComponent as K, ref as F, computed as B, watch as se, resolveComponent as p, createElementBlock as E, openBlock as f, Fragment as Z, renderSlot as re, createVNode as d, unref as e, withCtx as g, createElementVNode as n, toDisplayString as T, h as N, withModifiers as D, getCurrentInstance as ie, renderList as ce, createBlock as L, createCommentVNode as ue } from "vue";
import { useI18n as j } from "@feedmepos/mf-common";
import { useSnackbar as Y, components as R, useDialog as ee, FmButtonVariant as H, useBreakpoints as de, FmButtonColorThemeVariant as me } from "@feedmepos/ui-library";
import { _ as pe } from "./ResponsiveFabButton.vue_vue_type_script_setup_true_lang-Cn-3MRBO.js";
import { G, u as ge, a1 as fe, $ as _e, A, a4 as ye, Q as q, M as te, a5 as ve } from "./index.vue_vue_type_script_setup_true_lang-BMVa5UfU.js";
import { _ as he } from "./PageLayout.vue_vue_type_script_setup_true_lang-2f0QfweQ.js";
import { _ as be } from "./app-D-J2cjak.js";
import { c as xe } from "./createForm-BoUQeZTd.js";
import { _ as J } from "./RuleView.vue_vue_type_script_setup_true_lang-DRUQOy4h.js";
import { u as Ce } from "./discardConfirm-BHni0LNu.js";
import { c as X } from "./object-DVUNCr7w.js";
import { r as ke } from "./rules-CIWTZQfh.js";
import { u as Q, a as we } from "./menu-DNLXOwiM.js";
import { c as Fe } from "./check-C9mY6LiX.js";
import { u as Ve } from "./item-BZS28ZS_.js";
import { u as ae } from "./category-g1gJyB0q.js";
const $e = {
  class: "fm-typo-en-title-md-600"
}, Me = {
  class: "flex flex-col gap-32 h-full min-h-0 py-16"
}, Se = {
  class: "flex gap-24 items-center"
}, Ee = {
  class: "text-fm-color-typo-secondary"
}, Be = {
  class: "flex-1"
}, Te = {
  class: "flex-1 overflow-hidden min-h-[300px]"
}, Ue = {
  class: "flex gap-8 items-center justify-start"
}, Le = /* @__PURE__ */ K({
  __name: "Form",
  props: {
    initialValue: {}
  },
  setup(O, {
    expose: h
  }) {
    const _ = O, V = Y(), b = G(V), $ = q(b), m = ge(), r = Ve(), {
      categories: x
    } = Q(), {
      t
    } = j(), U = F(!1), u = F(!1), M = (a) => {
      Fe.isBoolean(a) ? u.value = a : u.value = !u.value;
    }, i = F(X(_.initialValue)), C = F(""), S = B(() => {
      var k;
      const a = ((k = x.value.find((w) => w.id === i.value.id)) == null ? void 0 : k.items) || [], o = fe(i.value.id);
      return _e(a, (w) => w.code || w.name, o);
    }), P = [{
      accessorKey: "name",
      header: () => t("menu.category.products.columns.name"),
      enableSorting: !1
    }, {
      accessorKey: "code",
      header: () => t("menu.category.products.columns.code"),
      enableSorting: !1
    }, {
      id: "actions",
      size: 52,
      meta: {
        cellClass: "pl-16",
        headerContentClass: "-mx-16"
      },
      header: "",
      cell: (a) => {
        const o = a.row.original;
        return N("div", {
          class: "flex justify-end"
        }, [N(R.FmButton, {
          icon: "edit",
          outline: !0,
          variant: "tertiary",
          textColor: "neutral-gray-400",
          onClick: D(async () => {
            await s(o);
          }, ["stop", "prevent"])
        })]);
      }
    }];
    async function l() {
      await r.create(i.value.id);
    }
    async function s(a) {
      await r.update(a._id);
    }
    const y = B(() => m.version === A.F_MENU_VERSION.enum.v4);
    async function I(a) {
      const o = ye(a, i.value.id);
      await r.updateMany(o);
    }
    const z = Ce(() => i.value.name !== _.initialValue.name, () => {
      u.value = !1;
    });
    async function c() {
      const a = m.categories.find((k) => k._id === i.value.id), {
        updateMenu: o
      } = $;
      await o({
        module: A.F_MENU_MODULE_V4_KEY.enum.category,
        operation: te.F_OPERATION_TYPE.update,
        data: {
          ...a,
          name: i.value.name ?? (a == null ? void 0 : a.name)
        }
      }, i.value.name), M(!1);
    }
    return se(() => u.value, () => {
      u.value && (i.value = X(_.initialValue));
    }), h({
      trigger: M,
      show: u
    }), (a, o) => {
      const k = p("FmTextField"), w = p("FmButton"), oe = p("FmSearch"), ne = p("FmTable"), W = p("fm-button"), le = p("fm-side-sheet");
      return f(), E(Z, null, [re(a.$slots, "default", {
        trigger: M
      }), d(le, {
        id: "group-form",
        modelValue: u.value,
        "onUpdate:modelValue": o[4] || (o[4] = (v) => u.value = v),
        "is-container": e(R).FmForm,
        "is-container-props": {
          onValidationSuccess: c,
          blameFormChildOnValidationFailed: !0
        },
        "max-width": 560,
        "onOn:clickedAway": e(z)
      }, {
        "side-sheet-header": g(() => [n("p", $e, T(e(t)("menu.category.title")), 1)]),
        "side-sheet-footer": g(() => [n("div", Ue, [d(W, {
          label: e(t)("menu.common.actions.update"),
          loading: U.value,
          size: "lg",
          type: "submit",
          variant: "primary",
          disabled: !i.value.id
        }, null, 8, ["label", "loading", "disabled"]), d(W, {
          label: e(t)("menu.common.actions.cancel"),
          size: "lg",
          variant: "tertiary",
          onClick: o[3] || (o[3] = () => u.value = !1)
        }, null, 8, ["label"])])]),
        default: g(() => [n("div", Me, [d(J, {
          title: e(t)("menu.category.detail")
        }, {
          default: g(() => [d(k, {
            label: e(t)("menu.category.name"),
            modelValue: i.value.name,
            "onUpdate:modelValue": o[0] || (o[0] = (v) => i.value.name = v),
            disabled: !i.value.id,
            rules: [e(ke)]
          }, null, 8, ["label", "modelValue", "disabled", "rules"])]),
          _: 1
        }, 8, ["title"]), d(J, {
          title: e(t)("menu.category.products.title"),
          class: "flex-1 min-h-0",
          shrinkable: !0
        }, {
          "append-title": g(() => [d(w, {
            label: e(t)("menu.category.products.add"),
            variant: "secondary",
            "prepend-icon": "add",
            "text-color": "primary",
            "border-color": "primary",
            onClick: l
          }, null, 8, ["label"])]),
          default: g(() => [n("div", Se, [n("div", Ee, T(e(t)("menu.category.products.linked_count", {
            count: S.value.length
          })), 1), n("div", Be, [d(oe, {
            placeholder: e(t)("menu.common.actions.search"),
            modelValue: C.value,
            "onUpdate:modelValue": o[1] || (o[1] = (v) => C.value = v)
          }, null, 8, ["placeholder", "modelValue"])])]), n("div", Te, [d(ne, {
            "column-defs": P,
            draggable: y.value,
            "page-size": S.value.length,
            "row-data": S.value,
            "search-value": C.value,
            "shrink-at": !1,
            "hide-footer": "",
            "pin-header-row": "",
            onDndChanged: I,
            onRowClick: o[2] || (o[2] = (v) => s(v.original))
          }, null, 8, ["draggable", "page-size", "row-data", "search-value"])])]),
          _: 1
        }, 8, ["title"])])]),
        _: 1
      }, 8, ["modelValue", "is-container", "is-container-props", "onOn:clickedAway"])], 64);
    };
  }
}), Ne = Le, Oe = {
  key: 0
}, Pe = {
  class: "flex justify-end items-center"
}, Ie = {
  class: "w-[320px]"
}, ze = {
  key: 1,
  class: "flex-1 flex flex-col min-h-0"
}, De = {
  class: "p-8"
}, Re = {
  class: "flex flex-1 flex-col min-h-0 overflow-scroll divide-y divide-fm-color-neutral-gray-100 pb-64"
}, Ae = ["onClick"], Ke = {
  class: "flex-1 space-y-4"
}, je = {
  class: "fm-typo-en-body-lg-600"
}, Ye = {
  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
}, Ge = /* @__PURE__ */ K({
  __name: "CategoryTable",
  setup(O) {
    const h = ee(), _ = Y(), V = G(_), b = q(V), $ = ae({
      dialog: h,
      menuLoader: b
    }), {
      categories: m
    } = Q(), r = F(""), x = B(() => m.value.filter((l) => l.name.toLowerCase().includes(r.value.toLowerCase()))), {
      t
    } = j(), U = F([{
      accessorKey: "name",
      header: () => t("menu.category.columns.title"),
      enableSorting: !1,
      meta: {
        width: "auto"
      }
    }, {
      accessorKey: "items",
      header: () => t("menu.category.columns.products"),
      enableSorting: !1,
      size: 200,
      cell: (l) => {
        const s = l.row.original;
        return t(s.items.length > 1 ? "menu.common.labels.product_linked_plural" : "menu.common.labels.product_linked_singular", {
          count: s.items.length
        });
      }
    }, {
      id: "actions",
      size: 52,
      meta: {
        cellClass: "pl-16",
        headerContentClass: "-mx-16"
      },
      header: "",
      cell: (l) => {
        const s = l.row.original;
        return N("div", {
          class: "flex justify-end"
        }, [N(R.FmButton, {
          icon: "delete",
          disabled: !s.id,
          variant: "tertiary",
          textColor: "neutral-gray-400",
          onClick: D(async () => {
            await u(s);
          }, ["stop", "prevent"])
        })]);
      }
    }]);
    async function u(l) {
      if (!l.id) {
        _.open({
          message: t("menu.category.dialog.remove.error"),
          type: "warning"
        });
        return;
      }
      h.open({
        title: t("menu.category.dialog.remove.title"),
        message: t("menu.common.dialog.remove_confirmation", {
          name: l.name
        }),
        primaryActions: {
          text: "Remove",
          close: !0,
          variant: H.Destructive
        },
        secondaryActions: {
          text: "Cancel",
          close: !0
        }
      }).onPrimary(async () => {
        await b.updateMenu({
          module: A.F_MENU_MODULE_V4_KEY.enum.category,
          operation: te.F_OPERATION_TYPE.delete,
          // `category.id` is guaranteed to be defined due to the earlier check in `deleteCategory`.
          data: l.id
        }, l.name, !0);
      });
    }
    async function M(l) {
      const s = l.map((y) => y.id).filter((y) => !!y);
      await $.rearrange(s);
    }
    const i = ie();
    async function C(l) {
      xe(i, Ne, {
        initialValue: l
      });
    }
    const S = de(), P = B(() => S.breakpoints.value.xs);
    return (l, s) => {
      const y = p("FmSearch"), I = p("FmTable"), z = p("FmButton");
      return P.value ? (f(), E("div", ze, [n("div", De, [d(y, {
        autofocus: "",
        modelValue: r.value,
        "onUpdate:modelValue": s[2] || (s[2] = (c) => r.value = c),
        class: "w-full",
        placeholder: e(t)("menu.common.labels.search_placeholder", {
          type: "categories"
        })
      }, null, 8, ["modelValue", "placeholder"])]), n("div", Re, [(f(!0), E(Z, null, ce(x.value, (c) => (f(), E("div", {
        key: c.id || "",
        class: "flex flex-row py-12 px-16",
        onClick: (a) => C(c)
      }, [n("div", Ke, [n("p", je, T(c.name), 1), n("p", Ye, T(e(t)(c.items.length > 1 ? "menu.common.labels.product_linked_plural" : "menu.common.labels.product_linked_singular", {
        count: c.items.length
      })), 1)]), d(z, {
        "text-color": e(me).NeutralGray400,
        variant: e(H).Tertiary,
        "prepend-icon": "delete",
        disabled: !c.id,
        onClick: D((a) => u(c), ["stop"])
      }, null, 8, ["text-color", "variant", "disabled", "onClick"])], 8, Ae))), 128))])])) : (f(), E("div", Oe, [n("div", Pe, [n("div", Ie, [d(y, {
        modelValue: r.value,
        "onUpdate:modelValue": s[0] || (s[0] = (c) => r.value = c),
        autofocus: "",
        class: "mb-8",
        placeholder: e(t)("menu.common.labels.search_placeholder", {
          type: e(t)("menu.category.title")
        })
      }, null, 8, ["modelValue", "placeholder"])])]), d(be, null, {
        default: g(() => [d(I, {
          "column-defs": U.value,
          draggable: !0,
          "page-size": e(m).length,
          "row-data": e(m),
          "search-value": r.value,
          "shrink-at": !1,
          "hide-footer": "",
          "pin-header-row": "",
          onDndChanged: M,
          onRowClick: s[1] || (s[1] = (c) => C(c.original))
        }, null, 8, ["column-defs", "page-size", "row-data", "search-value"])]),
        _: 1
      })]));
    };
  }
}), qe = { class: "flex-1 flex justify-between gap-8 pl-8" }, Qe = { class: "flex items-center" }, We = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, He = { class: "fm-typo-en-body-md-600 font-semibold" }, pt = /* @__PURE__ */ K({
  __name: "Category",
  setup(O) {
    const h = ee(), _ = Y(), V = G(_), b = q(V), $ = ae({ dialog: h, menuLoader: b }), { categories: m } = Q(), { t: r } = j();
    function x() {
      $.create();
    }
    const t = B(() => m.value.length);
    return we().resetOnMount(), (U, u) => (f(), L(he, {
      heading: e(r)("menu.category.title")
    }, {
      default: g(() => [
        e(m).length > 0 ? (f(), L(Ge, { key: 0 })) : (f(), L(e(ve), {
          key: 1,
          action: {
            text: e(r)("menu.category.add"),
            callback: x
          },
          subtitle: e(r)("menu.category.empty.subtitle"),
          title: e(r)("menu.category.empty.title")
        }, null, 8, ["action", "subtitle", "title"]))
      ]),
      "append-heading": g(() => [
        n("div", qe, [
          n("div", Qe, [
            n("div", We, [
              n("p", He, T(t.value), 1)
            ])
          ]),
          e(m).length > 0 ? (f(), L(pe, {
            key: 0,
            label: e(r)("menu.category.add"),
            "prepend-icon": "add",
            onClick: x
          }, null, 8, ["label"])) : ue("", !0)
        ])
      ]),
      _: 1
    }, 8, ["heading"]));
  }
});
export {
  pt as default
};
