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