import { jsx as n, jsxs as y } from "react/jsx-runtime";
import { useRef as L, useState as Q } from "react";
import { Container as W, Grid as g, Popup as X } from "semantic-ui-react";
import Z from "../data/DataProvider.js";
import ee from "../data/DataConsumer.js";
import "@devgateway/wp-react-lib";
import { connect as te } from "react-redux";
import { alphaSort as ne } from "../utils/common.js";
import B from "string-template";
const oe = (t) => {
  const {
    editing: u = !1,
    unique: C,
    intl: v,
    childContent: F,
    "data-csv": p = "",
    "data-dvz-proxy-dataset-id": d,
    "data-no-data-message": q = "No data matches your selection",
    "data-view-mode": U = "info",
    "data-height": w,
    "data-app": b,
    "data-measures": Y = "{}",
    "data-format": k = "{}",
    "data-group": f,
    "data-filters": M = "[]",
    "data-text-color": e = "#5a5d68",
    "data-number-color": o = "#5a5d68",
    "data-percent-color": a = "#5a5d68",
    "data-back-ground-color": i = "#5a5d68",
    "data-big-number-font-size": m = 20,
    "data-label-font-size": l = 20,
    "data-percent-font-size": x = 20,
    "data-label": S = "",
    "data-dimension1": D,
    "data-show-percentage-change": N = "false",
    "data-wait-for-filters": z = "false",
    "data-no-data-text": I = "-",
    "data-icon-image": _ = "",
    "data-icon-up": T = "",
    "data-icon-down": V = "",
    "data-show-tooltip": R = "false",
    "data-tooltip-text": $ = "",
    "data-tooltip-style": A = "light"
  } = t, j = v.locale, P = L(null), r = (s) => u ? s : decodeURIComponent(s), h = (s) => {
    try {
      return JSON.parse(r(s));
    } catch {
      console.error("error parsing value:" + s);
    }
    return null;
  }, c = h(k), J = c ? {
    style: c.style === "compacted" ? "decimal" : c.style,
    notation: c.style === "compacted" ? "compact" : "standard",
    currency: c.currency,
    minimumFractionDigits: parseInt(c.minimumFractionDigits),
    maximumFractionDigits: parseInt(c.maximumFractionDigits)
  } : {
    notation: "standard",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }, [le, ce] = Q(U), K = u ? w - 80 : w - 40, E = {}, G = h(M) || {};
  G && G.forEach && G.forEach((s) => {
    s.value != null && s.value.filter((O) => O != null && O.toString().trim() != "").length > 0 && (E[s.param] = s.value);
  }), d && (E.dvzProxyDatasetId = d);
  const H = [];
  return D != "none" && H.push(D), /* @__PURE__ */ n("div", { ref: P, children: /* @__PURE__ */ n(
    W,
    {
      className: `alternative big number container ${u ? "editing" : ""}`,
      style: { height: w + "px", backgroundColor: i },
      fluid: !0,
      children: /* @__PURE__ */ n(
        Z,
        {
          style: { height: `${K}px` },
          params: E,
          app: b,
          group: f,
          csv: p,
          editing: u,
          waitForFilters: z === "true",
          store: [b, C, ...H],
          source: H.join("/"),
          children: /* @__PURE__ */ n(ee, { children: /* @__PURE__ */ n(
            ae,
            {
              iconImage: _,
              iconUp: T,
              iconDown: V,
              editing: u,
              locale: j,
              intl: v,
              app: b,
              format: J,
              dimension1: D,
              measure: h(Y)[0] || null,
              label: S,
              bigNumberFontSize: m,
              textColor: e,
              numberColor: o,
              percentColor: a,
              backGroundColor: i,
              labelFontSize: l,
              percentFontSize: x,
              showPercentageChange: N == "true" || N == !0,
              noDataText: I,
              showTooltip: R == "true" || R === !0,
              tooltipText: r($),
              tooltipStyle: A
            }
          ) })
        }
      )
    }
  ) });
}, ae = (t) => {
  const {
    editing: u,
    app: C,
    measure: v,
    dimension1: F,
    data: p,
    format: d,
    label: q,
    textColor: U,
    bigNumberFontSize: w,
    percentFontSize: b,
    labelFontSize: Y,
    showPercentageChange: k,
    intl: f,
    noDataText: M
  } = t;
  let e = [], o, a;
  if (C == "csv") {
    const { data: r, meta: { fields: h } } = p;
    o = h[0], a = h[1], e = p.data.map((c) => ({
      value: c[o],
      [a]: c[a],
      [o]: c[o]
    }));
  } else if (a = v, o = F, o == null || o == "none") {
    let r = {};
    r[a] = p[a], e = [r];
  } else
    e = !p.children || p.children.length == 0 ? [] : p.children, e = e.map((r) => ({
      value: r.value,
      [a]: r[a],
      [o]: r.value
    }));
  let i = null, m = null, l, x, S;
  e.length > 0 && (e = e.sort((r, h) => ne(!1, f.locale, r.value, h.value)), i = e[e.length - 1][a], e.length > 1 && (m = e[e.length - 2][a]), S = f.formatNumber(d.style === "percent" ? i / 100 : i, { ...d }), m && (l = (i - m) / m, x = f.formatNumber(l, {
    style: "percent",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }))), i == null && (S = M);
  const D = {
    color: decodeURIComponent(t.numberColor),
    fontSize: w + "px"
  }, N = {
    color: decodeURIComponent(t.percentColor),
    fontSize: b + "px"
  }, z = {
    color: decodeURIComponent(t.percentColor),
    fontSize: b + "px",
    lineHeight: 1.1
  }, I = {
    display: "inline-flex",
    flexDirection: "column",
    alignItems: "center"
  }, _ = {
    color: decodeURIComponent(U),
    fontSize: Y + "px"
  }, T = e.length > 0 ? e[e.length - 1] : {}, V = e.length > 0 ? T[o] : null, R = e.length > 1 ? e[e.length - 2][o] : null, $ = i != null ? f.formatNumber(d.style === "percent" ? i / 100 : i, { ...d }) : null, A = m != null ? f.formatNumber(d.style === "percent" ? m / 100 : m, { ...d }) : null, j = {
    ...T,
    current_year: V,
    previous_year: R,
    current_value: $,
    previous_value: A,
    percent_change: x
  }, P = t.showTooltip && t.tooltipText ? B(t.tooltipText, j) : void 0;
  return /* @__PURE__ */ y(g, { padded: !0, children: [
    /* @__PURE__ */ y(g.Row, { children: [
      /* @__PURE__ */ n(g.Column, { width: 4, children: t.iconImage && t.iconImage != "" && /* @__PURE__ */ n("img", { className: "icon main", src: t.iconImage }) }),
      /* @__PURE__ */ y(g.Column, { textAlign: "right", width: 12, children: [
        /* @__PURE__ */ n("img", { className: `icon up ${l > 0 ? "visible" : "hidden"}`, src: t.iconUp }),
        /* @__PURE__ */ n("img", { className: `icon up ${l < 0 ? "visible" : "hidden"}`, s: !0, src: t.iconDown }),
        k && l != null && (t.showTooltip && P ? /* @__PURE__ */ n(
          X,
          {
            content: P,
            position: "top center",
            inverted: t.tooltipStyle === "dark",
            size: "small",
            trigger: /* @__PURE__ */ y("div", { style: I, children: [
              /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
                " ",
                l > 0 ? "+" : "",
                l == 0 ? "=" : "",
                x
              ] }),
              /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
            ] })
          }
        ) : /* @__PURE__ */ y("div", { style: I, children: [
          /* @__PURE__ */ y("div", { className: "percentage", style: N, children: [
            " ",
            l > 0 ? "+" : "",
            l == 0 ? "=" : "",
            x
          ] }),
          /* @__PURE__ */ n("div", { className: "percentage-yoy", style: z, children: "YoY" })
        ] }))
      ] })
    ] }),
    /* @__PURE__ */ n(g.Row, { children: /* @__PURE__ */ n(g.Column, { width: 16, children: /* @__PURE__ */ n("span", { className: "number", style: D, children: S }) }) }),
    /* @__PURE__ */ n(g.Row, { children: /* @__PURE__ */ n(g.Column, { children: /* @__PURE__ */ n("div", { className: "label", style: _, children: B(q, j) }) }) })
  ] });
}, re = (t, u) => {
  const { "data-app": C, "data-group": v } = u, F = t.getIn(["data", "measures", C, v]);
  return F ? {
    injectedMeasures: F
  } : {};
}, ie = {}, ve = te(re, ie)(oe);
export {
  ve as default
};
