import { defineComponent as S, mergeModels as $, useModel as M, ref as N, computed as P, resolveComponent as p, createBlock as C, openBlock as s, withCtx as m, createElementVNode as y, createVNode as a, unref as e, normalizeClass as E, createTextVNode as ge, toDisplayString as O, createElementBlock as h, Fragment as q, renderSlot as Q, createCommentVNode as U, watch as _e, resolveDynamicComponent as X, isRef as Y, renderList as H, onMounted as ye, normalizeStyle as Ce } from "vue";
import { W as be, i as Ve, S as ke, d as Fe, T as xe, _ as he } from "./TransitionFade-C9NidmbR.js";
import { a as Z, v as ee } from "./v4-C5fRBp_c.js";
import { storeToRefs as oe } from "pinia";
import { useRouter as te, useRoute as le } from "vue-router";
import { useBreakpoints as A, FmButtonColorThemeVariant as I, useSnackbar as we } from "@feedmepos/ui-library";
import { u as re } from "./message-dialog-UoMWOnil.js";
import { _ as ne } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-CEyrg6sv.js";
import { _ as ae } from "./NoData.vue_vue_type_script_setup_true_lang-CdFXBqlX.js";
import { u as L, f as $e } from "./global-loader-CbmVhJAK.js";
import { r as K } from "./i18n-Cif1I9J2.js";
const Se = /* @__PURE__ */ S({
  __name: "WidgetDialog",
  props: /* @__PURE__ */ $({
    isOpen: { type: Boolean }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ $(["isOpen"], ["update:modelValue"]),
  setup(c, { emit: u }) {
    const { t: o } = L(), { breakpoints: l } = A(), g = M(c, "modelValue"), i = c, r = u;
    function n() {
      r("isOpen", !1);
    }
    function v() {
      t.value && (g.value = t.value, t.value = void 0, r("isOpen", !1));
    }
    const t = N(), k = P(() => !t.value);
    return (B, w) => {
      const R = p("FmButton"), T = p("FmDialog");
      return s(), C(T, {
        "model-value": i.isOpen
      }, {
        "dialog-header": m(() => [
          ge(O(e(o)("report.widget.type")), 1)
        ]),
        default: m(() => [
          a(be, {
            modelValue: t.value,
            "onUpdate:modelValue": w[0] || (w[0] = (f) => t.value = f),
            class: E(`grid ${e(l).lg || e(l).md ? "grid-cols-3 gap-3" : "grid-cols-2 gap-3"}`),
            "child-class": "p-[8px] flex flex-col"
          }, null, 8, ["modelValue", "class"])
        ]),
        "dialog-footer": m(() => [
          w[1] || (w[1] = y("div", { class: "grow" }, null, -1)),
          a(R, {
            label: e(o)("report.common.cancel"),
            variant: "tertiary",
            onClick: n
          }, null, 8, ["label"]),
          a(R, {
            label: e(o)("report.common.confirm"),
            disabled: k.value,
            onClick: v
          }, null, 8, ["label", "disabled"])
        ]),
        _: 1
      }, 8, ["model-value"]);
    };
  }
}), Re = { class: "fm-typo-en-body-lg-600" }, z = /* @__PURE__ */ S({
  __name: "ReportEditorTabHeader",
  props: /* @__PURE__ */ $({
    icon: {
      type: String,
      required: !0
    }
  }, {
    modelValue: { type: Boolean, required: !0, default: !1 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(c) {
    const { t: u } = L(), o = M(c, "modelValue"), l = c;
    return (g, i) => {
      const r = p("FmIcon");
      return s(), h("div", {
        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
        onClick: i[0] || (i[0] = (n) => o.value = !o.value)
      }, [
        y("p", Re, O(e(u)("report.editor.customizeReport")), 1),
        i[1] || (i[1] = y("div", { class: "grow" }, null, -1)),
        a(r, {
          name: l.icon
        }, null, 8, ["name"])
      ]);
    };
  }
}), Te = /* @__PURE__ */ S({
  __name: "ReportEditorTabDesktop",
  props: {
    modelValue: { required: !0, default: !1 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(c) {
    const u = M(c, "modelValue");
    return (o, l) => (s(), h(q, null, [
      a(z, {
        modelValue: u.value,
        "onUpdate:modelValue": l[0] || (l[0] = (g) => u.value = g),
        icon: "keyboard_double_arrow_left"
      }, null, 8, ["modelValue"]),
      Q(o.$slots, "default")
    ], 64));
  }
}), Me = /* @__PURE__ */ S({
  __name: "ReportEditorTabMobile",
  props: {
    modelValue: { required: !0, default: !1 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(c) {
    const u = M(c, "modelValue");
    return (o, l) => {
      const g = p("FmTopSheet"), i = p("FmCard");
      return s(), C(i, { class: "fixed bottom-0 w-full" }, {
        default: m(() => [
          a(z, {
            modelValue: u.value,
            "onUpdate:modelValue": l[0] || (l[0] = (r) => u.value = r),
            icon: "keyboard_double_arrow_up"
          }, null, 8, ["modelValue"]),
          a(g, {
            modelValue: u.value,
            "onUpdate:modelValue": l[2] || (l[2] = (r) => u.value = r),
            "fullscreen-size": "sm"
          }, {
            default: m(() => [
              a(z, {
                modelValue: u.value,
                "onUpdate:modelValue": l[1] || (l[1] = (r) => u.value = r),
                icon: "keyboard_double_arrow_down"
              }, null, 8, ["modelValue"]),
              u.value ? Q(o.$slots, "default", { key: 0 }) : U("", !0)
            ]),
            _: 3
          }, 8, ["modelValue"])
        ]),
        _: 3
      });
    };
  }
}), Be = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Oe = { class: "flex flex-col gap-24" }, qe = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, ie = /* @__PURE__ */ S({
  __name: "ReportEditorTab",
  props: /* @__PURE__ */ $({
    hideConfiguration: {
      type: Boolean,
      default: !1
    }
  }, {
    modelValue: { required: !0 },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ $(["hideConfiguration"], ["update:modelValue"]),
  setup(c, { emit: u }) {
    const o = M(c, "modelValue"), { breakpoints: l } = A(), g = c, i = u, r = te(), n = le(), v = N(), { currentSelectWidgetType: t, categories: k, editingTile: B, editingIndex: w } = oe(Z()), { promptMessage: R } = re(), T = N(!1), { t: f, te: b } = L();
    _e(
      () => t.value,
      () => {
        t.value !== void 0 && (o.value.tiles.push(Ve(t.value)), w.value = o.value.tiles.length - 1, B.value = o.value.tiles[o.value.tiles.length - 1], r.push({
          name: "tileEditor",
          query: n.query
        }));
      },
      { immediate: !0 }
    );
    const F = [
      {
        label: f("report.common.edit"),
        selected: !1,
        variant: "tertiary",
        onClick: (V) => {
          w.value = V, B.value = JSON.parse(JSON.stringify(o.value.tiles[V])), r.push({
            name: "tileEditor",
            query: n.query
          });
        }
      },
      {
        label: f("report.common.duplicate"),
        selected: !1,
        variant: "tertiary",
        onClick: (V) => {
          o.value.tiles.push(JSON.parse(JSON.stringify(o.value.tiles[V])));
        }
      },
      {
        label: f("report.common.remove"),
        selected: !1,
        variant: "destructive",
        onClick: async (V) => {
          await R({
            title: f("report.editor.deleteWidget"),
            message: f("report.editor.deleteWidgetConfirm", {
              title: o.value.tiles[V].widget.title
            })
          }) && (o.value.tiles = o.value.tiles.filter((G, W) => W !== V));
        }
      }
    ], x = P(() => k.value.map((V) => ({
      label: f(`report.category.${V.name}`),
      value: V.id
    })));
    return (V, d) => {
      const G = p("FmTextField"), W = p("FmSelect"), j = p("FmButton"), se = p("FmIcon"), ue = p("FmTooltip"), de = p("FmMenuItem"), me = p("FmMenu"), pe = p("FmListItem"), ce = p("FmList"), fe = p("FmForm");
      return s(), C(X(e(l).lg || e(l).md ? Te : Me), {
        "model-value": g.hideConfiguration,
        "onUpdate:modelValue": d[5] || (d[5] = (_) => i("hideConfiguration", _))
      }, {
        default: m(() => [
          a(Se, {
            modelValue: e(t),
            "onUpdate:modelValue": d[0] || (d[0] = (_) => Y(t) ? t.value = _ : null),
            "is-open": T.value,
            onIsOpen: d[1] || (d[1] = (_) => T.value = _)
          }, null, 8, ["modelValue", "is-open"]),
          a(fe, {
            ref_key: "form",
            ref: v,
            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
          }, {
            default: m(() => [
              a(ke, { class: "border-solid" }, {
                header: m(() => [
                  y("p", null, O(e(f)("report.editor.reportInfo")), 1),
                  d[6] || (d[6] = y("div", { class: "grow" }, null, -1))
                ]),
                content: m(() => [
                  y("div", Be, [
                    a(G, {
                      modelValue: o.value.name,
                      "onUpdate:modelValue": d[2] || (d[2] = (_) => o.value.name = _),
                      label: e(f)("report.editor.reportTitle"),
                      placeholder: e(f)("report.editor.placeholder")
                    }, null, 8, ["modelValue", "label", "placeholder"]),
                    a(W, {
                      modelValue: o.value.category,
                      "onUpdate:modelValue": d[3] || (d[3] = (_) => o.value.category = _),
                      label: e(f)("report.common.category"),
                      items: x.value
                    }, null, 8, ["modelValue", "label", "items"])
                  ])
                ]),
                _: 1
              }),
              y("div", Oe, [
                a(j, {
                  label: e(f)("report.editor.addWidget"),
                  variant: "secondary",
                  icon: "add",
                  "icon-position": "prepend",
                  "border-color": e(I).ColorPrimary,
                  "text-color": e(I).ColorPrimary,
                  onClick: d[4] || (d[4] = (_) => T.value = !0)
                }, null, 8, ["label", "border-color", "text-color"]),
                a(ce, null, {
                  default: m(() => [
                    a(e(Fe), {
                      list: o.value.tiles,
                      "item-key": "id",
                      class: "flex flex-col gap-2 cursor-grab",
                      handle: ".handle"
                    }, {
                      item: m(({ element: _, index: D }) => [
                        a(pe, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
                          default: m(() => [
                            a(se, {
                              name: "drag_handle",
                              class: "handle"
                            }),
                            a(ue, {
                              content: _.widget.title ? e(K)(e(f), e(b), _.widget.title, "other") : e(f)("report.editor.widget", { index: D + 1 }),
                              class: "handle"
                            }, {
                              default: m(() => [
                                y("p", qe, O(_.widget.title ? e(K)(e(f), e(b), _.widget.title, "other") : e(f)("report.editor.widget", { index: D + 1 })), 1)
                              ]),
                              _: 2
                            }, 1032, ["content"]),
                            d[7] || (d[7] = y("div", { class: "grow" }, null, -1)),
                            a(me, {
                              trigger: "click",
                              shift: !0,
                              "stop-click-propagation": !0
                            }, {
                              "menu-button": m(() => [
                                a(j, {
                                  "append-icon": "more_vert",
                                  variant: "tertiary"
                                })
                              ]),
                              default: m(() => [
                                (s(), h(q, null, H(F, (J, ve) => a(de, {
                                  key: ve,
                                  onClick: (De) => J.onClick(D)
                                }, {
                                  label: m(() => [
                                    y("p", {
                                      class: E(
                                        J.variant === "destructive" ? " text-fm-color-system-error-300" : ""
                                      )
                                    }, O(J.label), 3)
                                  ]),
                                  _: 2
                                }, 1032, ["onClick"])), 64))
                              ]),
                              _: 2
                            }, 1024)
                          ]),
                          _: 2
                        }, 1024)
                      ]),
                      _: 1
                    }, 8, ["list"])
                  ]),
                  _: 1
                })
              ])
            ]),
            _: 1
          }, 512)
        ]),
        _: 1
      }, 8, ["model-value"]);
    };
  }
}), Ue = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, Ne = { class: "flex bg-fm-color-neutral-white w-[88px]" }, Pe = { class: "w-full overflow-y-auto" }, Ee = {
  key: 0,
  class: "w-full grid grid-cols-12 gap-[24px] p-24",
  style: { backgroundColor: "#F6F8FC" }
}, Ie = /* @__PURE__ */ S({
  __name: "ReportEditorDesktop",
  props: /* @__PURE__ */ $({
    hideConfiguration: { type: Boolean, required: !0, default: !1 }
  }, {
    modelValue: { required: !0, default: () => {
    } },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ $(["hideConfiguration"], ["update:modelValue"]),
  setup(c, { emit: u }) {
    const o = M(c, "modelValue"), l = c, g = u;
    return (i, r) => {
      const n = p("FmCircularProgress"), v = p("FmButton");
      return s(), h("div", null, [
        o.value ? (s(), h(q, { key: 1 }, [
          a(xe, {
            "model-value": !l.hideConfiguration
          }, {
            right: m(() => [
              y("div", Ue, [
                o.value ? (s(), C(ie, {
                  key: 0,
                  modelValue: o.value,
                  "onUpdate:modelValue": r[0] || (r[0] = (t) => o.value = t),
                  "hide-configuration": l.hideConfiguration,
                  onHideConfiguration: r[1] || (r[1] = (t) => {
                    g("hideConfiguration", t);
                  })
                }, null, 8, ["modelValue", "hide-configuration"])) : U("", !0)
              ])
            ]),
            left: m(() => [
              y("div", Ne, [
                a(v, {
                  variant: "secondary",
                  icon: "keyboard_double_arrow_right",
                  "border-color": e(I).ColorPrimary,
                  "text-color": e(I).ColorPrimary,
                  class: "m-24 my-16",
                  size: "md",
                  onClick: r[2] || (r[2] = (t) => g("hideConfiguration", !l.hideConfiguration))
                }, null, 8, ["border-color", "text-color"])
              ])
            ]),
            _: 1
          }, 8, ["model-value"]),
          y("div", Pe, [
            o.value.tiles.length > 0 ? (s(), h("div", Ee, [
              (s(!0), h(q, null, H(o.value.tiles, (t, k) => (s(), C(ne, {
                key: `${e(ee)()}_${k}`,
                "model-value": t,
                index: k,
                "hide-export": !0
              }, null, 8, ["model-value", "index"]))), 128))
            ])) : (s(), C(ae, { key: 1 }))
          ])
        ], 64)) : (s(), C(n, { key: 0 }))
      ]);
    };
  }
}), Le = {
  key: 0,
  class: "grid grid-cols-12 gap-[16px]"
}, We = /* @__PURE__ */ S({
  __name: "ReportEditorMobile",
  props: /* @__PURE__ */ $({
    hideConfiguration: { type: Boolean, required: !0, default: !1 }
  }, {
    modelValue: { required: !0, default: () => {
    } },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ $(["hideConfiguration"], ["update:modelValue"]),
  setup(c, { emit: u }) {
    const o = M(c, "modelValue"), l = c, g = u;
    return (i, r) => {
      const n = p("FmCircularProgress"), v = p("FmCard");
      return s(), h("div", null, [
        o.value ? (s(), h(q, { key: 1 }, [
          a(v, { class: "px-5 pb-28" }, {
            default: m(() => [
              o.value.tiles.length > 0 ? (s(), h("div", Le, [
                (s(!0), h(q, null, H(o.value.tiles, (t, k) => (s(), C(ne, {
                  key: `${e(ee)()}_${k}`,
                  "model-value": t,
                  index: k,
                  "hide-export": !0
                }, null, 8, ["model-value", "index"]))), 128))
              ])) : (s(), C(ae, { key: 1 }))
            ]),
            _: 1
          }),
          o.value ? (s(), C(ie, {
            key: 0,
            modelValue: o.value,
            "onUpdate:modelValue": r[0] || (r[0] = (t) => o.value = t),
            "hide-configuration": l.hideConfiguration,
            onHideConfiguration: r[1] || (r[1] = (t) => {
              g("hideConfiguration", t);
            })
          }, null, 8, ["modelValue", "hide-configuration"])) : U("", !0)
        ], 64)) : (s(), C(n, { key: 0 }))
      ]);
    };
  }
}), eo = /* @__PURE__ */ S({
  __name: "ReportEditor",
  setup(c) {
    const u = te(), o = le(), l = Z(), { promptLoader: g } = $e(), { t: i } = L(), { currentReport: r, editingReport: n } = oe(l), { breakpoints: v } = A(), t = P(() => {
      var b;
      return !((b = n.value) != null && b.editable);
    }), k = P(() => {
      var b;
      return ((b = n.value) == null ? void 0 : b.name) ?? i("report.editor.newReport");
    }), B = we(), { promptMessage: w } = re(), R = N(!1);
    async function T() {
      if (!n.value || n.value.tiles.length === 0) {
        B.open({ message: i("report.messages.noWidget"), type: "error" });
        return;
      }
      const b = t.value ? i("report.common.clone") : i("report.common.save");
      if (await w({
        title: `${i("report.messages.saveReport")}`,
        message: i("report.messages.confirmAction", { action: b, name: k.value })
      }))
        try {
          await g(async () => {
            if (t.value) {
              const x = JSON.parse(JSON.stringify(n.value));
              x.editable = !0, x.id = "", x.name = `${x.name} ${i("report.common.duplicate")}`, await l.createOrUpdateReport(x);
            } else
              n.value && await l.createOrUpdateReport(n.value);
            u.push({
              name: "reportView",
              query: o.query
            });
          });
        } catch (x) {
          console.log(x), B.open({
            message: i("report.messages.failedToAction", { action: b }),
            type: "error"
          });
        }
    }
    async function f() {
      var F;
      if (!n.value) return;
      await w({
        title: i("report.common.report", 1),
        message: i("report.editor.notSaved", { name: (F = n.value) == null ? void 0 : F.name })
      }) && (n.value = JSON.parse(JSON.stringify(r.value)), u.back());
    }
    return ye(() => {
      n.value || u.push({ name: "reports" });
    }), (b, F) => {
      const x = p("FmChip"), V = p("FmPageHead");
      return s(), C(he, null, {
        default: m(() => [
          a(V, {
            actions: [
              { label: e(i)("report.common.cancel"), value: "cancel", isPrimary: !1 },
              { label: "Save Report", value: "save", isPrimary: !0, prependIcon: "download" }
            ],
            "onClick:action": F[0] || (F[0] = (d) => {
              d === "cancel" && f(), d === "save" && T();
            })
          }, {
            title: m(() => [
              y("p", {
                class: E(`${e(v).sm || e(v).xs ? "hidden" : ""} fm-typo-en-title-md-600`)
              }, O(k.value), 3),
              !e(n) || e(n).tiles.length <= 0 ? (s(), C(x, {
                key: 0,
                label: e(i)("report.editor.draft"),
                icon: "hexagon",
                selectable: !1
              }, null, 8, ["label"])) : U("", !0)
            ]),
            _: 1
          }, 8, ["actions"]),
          e(n) ? (s(), C(X(e(v).lg || e(v).md ? Ie : We), {
            key: 0,
            modelValue: e(n),
            "onUpdate:modelValue": F[1] || (F[1] = (d) => Y(n) ? n.value = d : null),
            class: E(`${e(v).lg || e(v).md ? "flex" : ""} w-full`),
            style: Ce({ height: `calc( 100% - ${e(v).lg || e(v).md ? 72 : 64}px)` }),
            "hide-configuration": R.value,
            onHideConfiguration: F[2] || (F[2] = (d) => R.value = d)
          }, null, 40, ["modelValue", "class", "style", "hide-configuration"])) : U("", !0)
        ]),
        _: 1
      });
    };
  }
});
export {
  eo as default
};
