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