import { defineComponent as L, computed as d, ref as g, h as k, withModifiers as x, resolveComponent as p, createBlock as b, openBlock as a, unref as e, withCtx as h, createElementVNode as o, createVNode as r, toDisplayString as f, createCommentVNode as N, createElementBlock as u, Fragment as v, normalizeClass as C, renderList as T } from "vue";
import { useI18n as E } from "@feedmepos/mf-common";
import { useSnackbar as K, components as R, useBreakpoints as D, FmButtonVariant as G } from "@feedmepos/ui-library";
import { _ as I } from "./ResponsiveFabButton.vue_vue_type_script_setup_true_lang-Cn-3MRBO.js";
import { G as q, u as A, a5 as H } from "./index.vue_vue_type_script_setup_true_lang-BMVa5UfU.js";
import { _ as J } from "./PageLayout.vue_vue_type_script_setup_true_lang-2f0QfweQ.js";
import { u as O, U as P } from "./unit-qhvUQfBE.js";
const Q = {
  key: 0,
  class: "h-[600px]"
}, W = {
  class: "flex justify-end items-center"
}, X = {
  class: "flex justify-end items-center my-8 px-16"
}, Y = {
  class: /* @__PURE__ */ C(["flex-1", "overflow-scroll", "divide-y divide-fm-color-neutral-gray-100", "pb-64"])
}, Z = ["onClick"], ee = {
  class: "flex-1"
}, te = {
  class: "fm-typo-en-body-lg-600 mb-4"
}, ne = {
  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
}, oe = {
  class: "flex-1 flex justify-between gap-8 pl-8"
}, le = {
  class: "flex items-center"
}, ae = {
  class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4"
}, se = {
  class: "fm-typo-en-body-md-600 font-semibold"
}, _e = /* @__PURE__ */ L({
  __name: "Unit",
  setup(re) {
    const w = K();
    q(w);
    const S = A(), i = O(), {
      t: n
    } = E(), m = d(() => S.units), _ = d(() => m.value.filter((s) => `${s.name} ${s.abbrev}`.toLowerCase().includes(c.value.toLowerCase()))), c = g(""), U = g([{
      accessorKey: "name",
      header: () => n("menu.unit.columns.name"),
      enableSorting: !1
    }, {
      accessorKey: "abbrev",
      header: () => n("menu.unit.columns.symbol"),
      enableSorting: !1
    }, {
      id: "actions",
      size: 52,
      meta: {
        cellClass: "pl-16",
        headerContentClass: "-mx-16"
      },
      header: "",
      cell: (s) => {
        const l = s.row.original;
        return k("div", {
          class: "flex justify-end"
        }, [k(R.FmButton, {
          icon: "delete",
          textColor: "neutral-gray-400",
          variant: "tertiary",
          onClick: x(async () => {
            i.deleteUnit(l);
          }, ["stop", "prevent"])
        })]);
      }
    }]);
    function V(s) {
      i.updateUnit(s);
    }
    const F = d(() => m.value.length), B = D(), M = d(() => B.breakpoints.value.xs);
    return (s, l) => {
      const y = p("FmSearch"), $ = p("FmTable"), j = p("fm-button"), z = p("FmSpacer");
      return a(), b(J, {
        heading: e(n)("menu.unit.title")
      }, {
        default: h(() => [m.value.length === 0 ? (a(), b(e(H), {
          key: 0,
          action: {
            text: e(n)("menu.unit.add"),
            callback() {
              e(i).createUnit();
            }
          },
          subtitle: e(n)("menu.unit.empty.subtitle"),
          title: e(n)("menu.unit.empty.title")
        }, null, 8, ["action", "subtitle", "title"])) : (a(), u(v, {
          key: 1
        }, [M.value ? (a(), u(v, {
          key: 1
        }, [o("div", X, [r(y, {
          modelValue: c.value,
          "onUpdate:modelValue": l[2] || (l[2] = (t) => c.value = t),
          autofocus: "",
          class: "w-full",
          placeholder: e(n)("menu.common.labels.search_placeholder", {
            type: "units"
          })
        }, null, 8, ["modelValue", "placeholder"])]), o("div", Y, [(a(!0), u(v, null, T(_.value, (t) => (a(), u("div", {
          key: t._id,
          class: C(["py-12 px-16", "flex  space-x-8", "items-center"]),
          onClick: () => e(i).updateUnit(t)
        }, [o("div", ee, [o("p", te, f(t.name), 1), o("p", ne, f(e(n)("menu.common.labels.symbol")) + ": " + f(t.abbrev), 1)]), r(j, {
          variant: e(G).Tertiary,
          "prepend-icon": "delete",
          "text-color": "neutral-gray-400",
          onClick: x(() => e(i).deleteUnit(t), ["stop"])
        }, null, 8, ["variant", "onClick"])], 8, Z))), 128))])], 64)) : (a(), u("div", Q, [o("div", W, [r(y, {
          modelValue: c.value,
          "onUpdate:modelValue": l[0] || (l[0] = (t) => c.value = t),
          autofocus: "",
          class: "mb-8 w-[320px]",
          placeholder: e(n)("menu.common.labels.search_placeholder", {
            type: "units"
          })
        }, null, 8, ["modelValue", "placeholder"])]), r($, {
          "column-defs": U.value,
          "page-size": _.value.length,
          "row-data": _.value,
          "shrink-at": !1,
          "hide-footer": "",
          "pin-header-row": "",
          onRowClick: l[1] || (l[1] = (t) => V(t.original))
        }, null, 8, ["column-defs", "page-size", "row-data"])]))], 64))]),
        "append-heading": h(() => [o("div", oe, [o("div", le, [o("div", ae, [o("p", se, f(F.value), 1)])]), r(z), r(e(P), null, {
          default: h(({
            trigger: t
          }) => [m.value.length > 0 ? (a(), b(I, {
            key: 0,
            label: e(n)("menu.unit.add"),
            "prepend-icon": "add",
            onClick: t
          }, null, 8, ["label", "onClick"])) : N("", !0)]),
          _: 1
        })])]),
        _: 1
      }, 8, ["heading"]);
    };
  }
});
export {
  _e as default
};
