import { jsx as e } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import d from "classnames";
import { memo as v } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
import { useMemo as w } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { classes as r } from "./constants.js";
import { getTransactionCategory as N } from "../../../../utils/translation/getters.js";
import { TypographyVariant as g, TypographyElement as p } from "../../../../internal/Typography/types.js";
import { ErrorMessageDisplay as A } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
import f from "../AmountDisplay/AmountDisplay.js";
import u from "../../../../internal/Typography/Typography.js";
/* empty css                    */
import k from "../../../../../core/Context/preact/useCoreContext.js";
import { Fragment as C } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import T from "../../../../internal/StructuredList/StructuredList.js";
const I = ({ currency: i, currenciesLookupResult: m, transactionsTotalsResult: a }) => {
  const { i18n: n } = k(), { currenciesDictionary: s } = m, o = i && s[i]?.totals || void 0;
  if (a.isWaiting || !o) {
    const t = Array.from({ length: 2 }), c = Array.from({ length: 3 }), l = d(r.skeleton, r.skeletonLoading);
    return /* @__PURE__ */ e("div", { className: r.root, children: [
      /* @__PURE__ */ e("span", { className: d(l, r.skeletonAmount, r.skeletonAmountLarge) }),
      /* @__PURE__ */ e("div", { className: r.breakdowns, children: t.map((L, y) => /* @__PURE__ */ e("div", { className: r.breakdown, children: [
        /* @__PURE__ */ e("span", { className: d(l, r.skeletonAmount) }),
        /* @__PURE__ */ e("div", { className: r.breakdownList, children: c.map((x, b) => /* @__PURE__ */ e("span", { className: l }, `breakdown-${b}`)) })
      ] }, `breakdown-${y}`)) })
    ] });
  }
  return /* @__PURE__ */ e("div", { className: r.root, children: a.error ? /* @__PURE__ */ e("div", { className: r.errorContainer, children: /* @__PURE__ */ e(
    A,
    {
      title: "common.errors.somethingWentWrong",
      message: ["common.errors.retry"],
      absolutePosition: !1,
      outlined: !1,
      withImage: !0,
      refreshComponent: !0,
      onRefreshComponent: a.refresh
    }
  ) }) : /* @__PURE__ */ e(C, { children: [
    /* @__PURE__ */ e(
      f,
      {
        amount: o.total,
        currency: o.currency,
        label: n.get("transactions.overview.totals.tags.periodResult"),
        large: !0
      }
    ),
    /* @__PURE__ */ e("div", { className: r.breakdowns, children: [
      /* @__PURE__ */ e(
        h,
        {
          amount: o.incomings,
          breakdown: o.breakdown.incomings,
          currency: o.currency,
          label: n.get("transactions.overview.totals.tags.incoming")
        }
      ),
      /* @__PURE__ */ e(
        h,
        {
          amount: o.expenses,
          breakdown: o.breakdown.expenses,
          currency: o.currency,
          label: n.get("transactions.overview.totals.tags.outgoing")
        }
      )
    ] })
  ] }) });
}, h = ({ ariaLabel: i, breakdown: m, ...a }) => {
  const { currency: n } = a, { i18n: s } = k(), o = w(
    () => m.map(
      ({ category: t, value: c }) => ({
        key: N(s, t),
        value: `${s.amount(c, n)} ${n}`
      })
    ),
    [s, m, n]
  );
  return /* @__PURE__ */ e("div", { className: r.breakdown, children: [
    /* @__PURE__ */ e(f, { ...a }),
    /* @__PURE__ */ e(
      T,
      {
        items: o,
        "aria-label": i,
        classNames: r.breakdownList,
        renderLabel: (t) => /* @__PURE__ */ e(u, { el: p.SPAN, variant: g.CAPTION, children: t }),
        renderValue: (t) => /* @__PURE__ */ e(u, { el: p.SPAN, variant: g.CAPTION, stronger: !0, children: t })
      }
    )
  ] });
}, z = v(I);
export {
  z as default
};
