import { jsxs as v, jsx as r, Fragment as J } from "react/jsx-runtime";
import { useState as $, useEffect as nt, Fragment as st } from "react";
import { injectIntl as lt } from "react-intl";
import { ResponsiveLine as it } from "@nivo/line";
import ct from "./Tooltip.js";
import { area as ot, line as mt } from "d3-shape";
import { useTheme as dt } from "@nivo/theming";
import ht from "../../layout/FlexWrapDetector.js";
import V from "../../utils/deviceType.js";
const ft = "#66676d", K = "#f0f0f1", ye = ["mobile", "tablet", "midTablet"].includes(V()), be = V() === "mobile", ge = ["tablet", "midTablet"].includes(V()), ut = (m, x) => {
  const N = document.createElement("canvas").getContext("2d");
  return N.font = x, N.measureText(m).width;
}, pt = ({
  editing: m,
  previewMode: x,
  app: Z,
  legends: N,
  tooltip: k,
  tooltipEnabled: ve,
  options: d,
  intl: I,
  groupMode: q,
  reverse: xt,
  marginLeft: Ne,
  lineLabelPosition: Ee,
  marginTop: Q,
  marginRight: Oe,
  marginBottom: X,
  format: E,
  colors: yt,
  offsetY: Te,
  height: Me,
  showLegends: P,
  legendPosition: h,
  tickRotation: y,
  offsetText: B,
  tickColor: j,
  legendLabel: C,
  xLabelColor: O,
  colorGenerator: ee,
  legendCheckBack: A,
  legendLabelBack: De,
  legendLabelColor: te,
  highlightXAxisLine: $e,
  showTickLine: S,
  showRightAxis: ke,
  valueScale: bt,
  enableArea: Ie,
  areaShadingCriteria: ae,
  areaLowerBound: re,
  areaUpperBound: ne,
  showPoints: Le,
  maxValue: Fe,
  fixedMinValue: H,
  fixedMaxValue: R,
  offsetBottom: We,
  yAxisTickValues: ze,
  enableGridY: _e,
  enableGridX: we,
  overrideTickColor: U,
  offsetRight: Be,
  selectedMeasures: je,
  tooltipEnableMarkdown: Ae,
  minMaxClamp: Se,
  reverseLegend: He,
  customAxisFormat: L,
  mobileCustomization: Re,
  lineCurve: Ue,
  customLabels: G
}) => {
  var ue, pe, xe;
  const s = JSON.parse(decodeURIComponent(Re)), se = ye && ((s == null ? void 0 : s.showCustomization) ?? !1), F = se && x !== "Desktop", W = !m && se, [le, Ge] = $(50), [ie, Ye] = $(Q), [gt, ce] = $(0), [oe, Je] = $(X), [T, Ke] = $([]), z = d.data.map((e) => ({
    id: e.id,
    label: G && G[e.id] ? G[e.id] : e.label || e.id,
    color: ee.getColor(e.id, e)
  })), me = () => (He && z.reverse(), /* @__PURE__ */ r(J, { children: P && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => qe(e.id), children: [
    /* @__PURE__ */ r(
      "input",
      {
        className: "ignore",
        type: "checkbox",
        checked: T.length === 0 || !T.includes(e.id),
        readOnly: !0,
        style: {
          backgroundColor: A === !0 ? e.color : "none",
          color: te
        }
      }
    ),
    /* @__PURE__ */ r(
      "span",
      {
        className: A === !0 ? "checkmark-with-bg" : "checkmark",
        style: {
          backgroundColor: A === !0 ? e.color : "transparent"
        }
      }
    ),
    /* @__PURE__ */ r(
      "label",
      {
        style: {
          backgroundColor: De === !0 ? e.color : "transparent",
          color: te
        },
        children: e.label
      }
    )
  ] }, t)) }));
  nt(() => {
    (() => {
      const a = 5 * Math.max(z.length - 5, 0);
      Ge(a);
    })();
  }, [z]);
  const Ve = {
    bottom: `-${le}px`
  }, Ze = {
    bottom: `-${le}px`,
    gap: "0px",
    top: "0px"
  }, _ = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, qe = (e) => {
    const t = T.slice();
    if (t.indexOf(e) > -1) {
      const a = t.indexOf(e);
      t.splice(a, 1);
    } else
      t.push(e);
    Ke(t);
  }, Qe = (e) => {
    const t = Object.assign({}, e), a = dt();
    (F || W) && he.includes(String(t.value)) && (t.value = "");
    let l = [], n = "";
    if (F || W) {
      const c = String(t.value).split(" ");
      let o = 25;
      m && x === "Mobile" || be && !m ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : m && x === "Tablet" || ge && !m ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !m && (o = 15), c.forEach((b) => {
        n.length + String(b).length <= o ? n += (n ? " " : "") + b : (l.push(n), n = b);
      }), n && l.push(n);
    } else
      l = [t.value];
    let i = 12;
    return m && x === "Mobile" || be && !m ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (m && x === "Tablet" || ge && !m) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ut(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
      S && /* @__PURE__ */ r(
        "line",
        {
          stroke: U ? j : K,
          strokeWidth: 1.5,
          y1: -32,
          y2: -12
        }
      ),
      /* @__PURE__ */ r("g", { transform: `translate(0, ${e.y + B})`, children: l.map((c, o) => /* @__PURE__ */ r(
        "text",
        {
          transform: `rotate(${y})`,
          textAnchor: "start",
          y: typeof e.value == "number" ? 0 : o * i,
          dominantBaseline: "middle",
          style: {
            ...a.axis.ticks.text,
            fill: O === "null" ? "black" : O,
            fontSize: "12px",
            fontFamily: "sans-serif"
          },
          children: c
        },
        c
      )) })
    ] }) : y > 180 && y < 360 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
      S && /* @__PURE__ */ r(
        "line",
        {
          stroke: U ? j : K,
          strokeWidth: 1.5,
          y1: -32,
          y2: -12
        }
      ),
      /* @__PURE__ */ r("g", { transform: `translate(0, ${e.y + B})`, children: /* @__PURE__ */ r(
        "text",
        {
          transform: `rotate(${y})`,
          textAnchor: "end",
          dominantBaseline: "middle",
          style: {
            ...a.axis.ticks.text,
            fill: O,
            fontSize: "12px"
          },
          children: t.value
        }
      ) })
    ] }) : /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
      S && /* @__PURE__ */ r(
        "line",
        {
          stroke: U ? j : K,
          strokeWidth: 1.5,
          y1: -32,
          y2: -12
        }
      ),
      /* @__PURE__ */ r("g", { transform: `translate(0, ${e.y + B})`, children: l.map((c, o) => /* @__PURE__ */ r(
        "text",
        {
          transform: `rotate(${y})`,
          textAnchor: "middle",
          y: typeof e.value == "number" ? 0 : o * i,
          dominantBaseline: "middle",
          style: {
            ...a.axis.ticks.text,
            fill: O === "null" ? "black" : O,
            fontSize: "12px",
            fontFamily: "sans-serif"
          },
          children: c
        },
        c
      )) })
    ] });
  }, Xe = ({ series: e, xScale: t, yScale: a, innerHeight: l }) => {
    const n = e && e.length > 0 ? e[0].color : "#3daff7", i = [];
    e[0] && e[0].data.forEach((p) => {
      Z == "csv" ? d.keys.forEach((g) => {
        i.push({ measure: g, min: p.data.variables[g] });
      }) : je.forEach((g) => {
        i.push({ measure: g, min: p.data.variables[g] });
      });
    });
    const c = i.sort((p, g) => p.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, rt = ot().x((p) => t(p.data.x)).y0((p) => a(p.data.variables[o])).y1((p) => a(p.data.variables[b]));
    return /* @__PURE__ */ r(J, { children: e && e[0] && /* @__PURE__ */ r(
      "path",
      {
        d: rt(e[0].data),
        fill: n,
        fillOpacity: 0.4
      }
    ) });
  }, Pe = ({ series: e, xScale: t, yScale: a, innerHeight: l, innerWidth: n }) => {
    const i = [0, n], c = mt().x((o, b) => b === 0 ? -10 : o).y((o) => a(0));
    return /* @__PURE__ */ r(st, { children: /* @__PURE__ */ r(
      "path",
      {
        d: c(i),
        fill: "none",
        stroke: ft,
        style: { pointerEvents: "none", strokeDasharray: "4 4" }
      }
    ) });
  }, M = ["grid", "axes", "lines", "legends"];
  Ie && M.push(Xe), Le && (M.push("points"), M.push("mesh")), $e && M.push(Pe);
  let D = [];
  _(d.data).forEach((e) => {
    e.data && (D = [...D, ...e.data.map((t) => t.y)]);
  });
  const Ce = () => {
    if (q === "stacked") {
      const e = [];
      _(d.data).forEach((l) => {
        e.push(...l.data);
      });
      const a = [];
      e.forEach((l) => {
        a.indexOf(l.x) == -1 && a.push(l.x);
      }), u = Math.max(
        ...a.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.max(n + i, n + 0)))
      ), f = Math.min(
        ...a.map((l) => e.filter((n) => n.x == l).map((n) => n.y).reduce((n, i) => Math.min(n - i, i - n)))
      );
    } else
      D.length > 0 && (u = Math.max(...D), f = Math.min(...D));
    return u = u < 0 ? u * 0.9 : u * 1.1, f = f > 0 ? f * 0.9 : f * 1.1, { min: f, max: u };
  };
  let f = "auto", u = "auto";
  const w = Ce();
  Fe == "fixed" ? (f = H != null && H != "" ? H : w.min, u = R != null && R != "" ? R : w.max) : (f = w.min, u = w.max);
  const de = () => /* @__PURE__ */ r(J, { children: P && C && /* @__PURE__ */ r("div", { className: "legend item", children: /* @__PURE__ */ r("label", { className: "legend-title", children: C }) }) }), et = {
    top: ie,
    right: Oe,
    bottom: oe,
    left: Ne
  };
  let Y = parseInt(ze);
  const tt = d.data && ((pe = (ue = d.data) == null ? void 0 : ue.filter((e) => {
    var t;
    return ((t = e == null ? void 0 : e.data) == null ? void 0 : t.length) > 0;
  })) == null ? void 0 : pe.length), he = [];
  if (F || W) {
    Y = Number.parseInt(s.yAxisTickValues);
    const e = new Map(Object.entries(((xe = s == null ? void 0 : s.labels) == null ? void 0 : xe.xAxis) ?? {}));
    for (const [t, a] of e)
      a || he.push(t);
  }
  const fe = _(d.data), at = ["grid", "axes", "legends"];
  if (d != null && d.data && tt > 0) {
    let e = _(d.data);
    return /* @__PURE__ */ v("div", { style: { height: Me }, children: [
      /* @__PURE__ */ r(
        it,
        {
          curve: Ue,
          data: fe,
          margin: et,
          xScale: { type: "point" },
          yScale: {
            type: "linear",
            min: f,
            max: u,
            stacked: q == "stacked",
            reverse: !1,
            clamp: Se
          },
          layers: fe.length === 0 ? at : M,
          axisTop: null,
          axisRight: ke ? {
            tickSize: 5,
            tickValues: Y,
            tickPadding: 5,
            tickRotation: 0,
            legend: N.right,
            legendPosition: "middle",
            legendOffset: parseInt(Be),
            format: (t) => {
              const a = L || E;
              return I.formatNumber(
                a.style === "percent" ? t / 100 : t,
                {
                  ...a
                }
              );
            }
          } : null,
          enableGridY: _e,
          enableGridX: we,
          enablePointLabel: Ee === "top",
          pointLabel: (t) => I.formatNumber(
            E.style === "percent" ? t.yFormatted / 100 : t.yFormatted,
            E
          ),
          lineWidth: 3,
          colors: (t) => ee.getColor(t.id, t),
          axisBottom: (F || W) && (s == null ? void 0 : s.xAxisDisabled) === !0 ? null : {
            renderTick: Qe,
            legend: N.bottom,
            legendPosition: "middle",
            legendOffset: Number.parseInt(We)
          },
          axisLeft: {
            tickSize: 5,
            tickValues: Y,
            tickPadding: 5,
            tickRotation: 0,
            legend: N.left,
            legendPosition: "middle",
            legendOffset: Number.parseInt(Te),
            format: (t) => {
              const a = L || E;
              return I.formatNumber(
                a.style === "percent" ? t / 100 : t,
                {
                  ...a
                }
              );
            }
          },
          tooltip: (t) => ve && k && k.trim().length > 0 ? /* @__PURE__ */ r(
            ct,
            {
              intl: I,
              format: E,
              d: t,
              tooltip: k,
              tooltipEnableMarkdown: Ae
            }
          ) : null,
          pointSize: 10,
          pointBorderWidth: 2,
          pointBorderColor: { from: "serieColor" },
          useMesh: e.length > 0 && e[0].data.length > 0
        },
        /* @__PURE__ */ new Date()
      ),
      (h === "top" || h === "bottom") && /* @__PURE__ */ r(
        "div",
        {
          className: `legends container has-standard-12-font-size ${h}`,
          style: h === "top" ? { marginTop: ye && `${ie}px` } : h === "bottom" ? { marginBottom: `${oe}px` } : {},
          children: /* @__PURE__ */ v("div", { className: "legend-sections", children: [
            /* @__PURE__ */ r("div", { className: "title-section", children: de() }),
            /* @__PURE__ */ r(
              ht,
              {
                onWrapChange: (t) => {
                  if (h === "top") {
                    const a = Q + t / 2 * 40;
                    Ye(a), ce(t);
                  } else
                    Je(X + t / 2 * 25), ce(t);
                },
                className: "legends container has-standard-12-font-size items-section",
                children: me()
              }
            )
          ] })
        }
      ),
      (h === "right" || h === "left") && /* @__PURE__ */ v(
        "div",
        {
          className: `legends container has-standard-12-font-size  ${h}`,
          style: h === "right" ? Ve : Ze,
          children: [
            de(),
            me()
          ]
        }
      )
    ] });
  }
  return /* @__PURE__ */ r("div", {});
}, It = lt(pt);
export {
  It as default
};
