import { jsxs as g, jsx as c } from "react/jsx-runtime";
import me, { useState as pe } from "react";
import { injectIntl as he } from "react-intl";
import { ResponsiveRadar as ue } from "@nivo/radar";
import be from "./Legends.js";
import A from "../../utils/deviceType.js";
import "lodash";
const xe = "none", ye = ({
  editing: i,
  legends: Le,
  marginLeft: O,
  marginTop: V,
  marginRight: z,
  marginBottom: F,
  options: d,
  intl: T,
  format: m,
  height: H,
  showLegends: $,
  legendPosition: w,
  legendLabel: I,
  legendCheckBack: W,
  legendLabelBack: Y,
  legendLabelColor: P,
  colorGenerator: U,
  reverseLegend: X,
  radarCurve: j,
  radarFillOpacity: J,
  radarBorderWidth: K,
  radarGridLevels: D,
  radarGridShape: _,
  radarGridLabelOffset: q = 10,
  radarEnableDots: G,
  radarDotSize: Q,
  radarEnableDotLabel: Z,
  radarDotLabelOffset: C,
  mobileCustomization: E,
  previewMode: x
}) => {
  const [L, S] = pe([]), p = A() === "mobile", h = ["tablet", "midTablet"].includes(A()), ee = p || h, e = me.useMemo(
    () => JSON.parse(decodeURIComponent(E)),
    [E]
  ), u = ee && ((e == null ? void 0 : e.showCustomization) ?? !1), R = u && x !== "Desktop", k = !i && u;
  if (!d || !d.data) return null;
  const te = (t) => t.filter((a) => !L.includes(a)), ae = (t) => S(
    (a) => a.includes(t) ? a.filter((l) => l !== t) : [...a, t]
  );
  function v({
    tickValue: t,
    editing: a,
    previewMode: l,
    isMobileDevice: o,
    isTabletDevice: s,
    mobileConfigSettings: r,
    isNotDesktopPreview: y,
    isNotEditingAndIsMobileCustomizationEnabled: b
  }) {
    let n = 25;
    return (y || b) && (a && l === "Mobile" || o && !a ? n = (r == null ? void 0 : r.mobileMaxTickLength) ?? 25 : a && l === "Tablet" || s && !a ? n = (r == null ? void 0 : r.tabletMaxTickLength) ?? 25 : !a && window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && (n = 15)), n;
  }
  const B = (t, a) => {
    const l = String(t).split(" "), o = [];
    let s = "";
    return l.forEach((r) => {
      `${s} ${r}`.trim().length <= a ? s = (s ? `${s} ` : "") + r : (o.push(s), s = r);
    }), s && o.push(s), o;
  }, re = ({ centerX: t, centerY: a, radiusScale: l }) => {
    const o = l.ticks(D).filter((r) => r > 0), s = p ? e.mobileYAxisLineHeight ?? 12 : h ? e.tabletYAxisLineHeight ?? 12 : 12;
    return /* @__PURE__ */ c("g", { children: o.map((r, y) => {
      const b = l(r), n = t + b * Math.sin(0) + 7, f = a - b * Math.cos(0), oe = T.formatNumber(
        m.style === "percent" ? r / 100 : r,
        m
      ), ce = v({
        tickValue: r,
        editing: i,
        previewMode: x,
        isMobileDevice: p,
        isTabletDevice: h,
        mobileConfigSettings: e,
        isNotDesktopPreview: R,
        isNotEditingAndIsMobileCustomizationEnabled: k
      }), ie = B(oe, ce);
      return /* @__PURE__ */ g("g", { children: [
        /* @__PURE__ */ c(
          "line",
          {
            x1: n - 7,
            y1: f - 4,
            x2: n - 3,
            y2: f - 4,
            stroke: "rgb(51,51,51)",
            strokeWidth: 1
          }
        ),
        ie.map((de, N) => /* @__PURE__ */ c(
          "text",
          {
            x: n,
            y: f + N * s,
            fontFamily: "sans-serif",
            fontSize: "11px",
            fill: "rgb(51,51,51)",
            children: de
          },
          N
        ))
      ] }, y);
    }) });
  }, le = ({ id: t, x: a, y: l }) => {
    const o = v({
      tickValue: t,
      editing: i,
      previewMode: x,
      isMobileDevice: p,
      isTabletDevice: h,
      mobileConfigSettings: e,
      isNotDesktopPreview: R,
      isNotEditingAndIsMobileCustomizationEnabled: k
    }), s = B(t, o), r = p ? e.mobileXAxisLineHeight ?? 12 : h ? e.tabletXAxisLineHeight ?? 12 : 12, y = a > 5 ? "start" : a < -5 ? "end" : "middle";
    return /* @__PURE__ */ c("g", { transform: `translate(${a}, ${l})`, children: /* @__PURE__ */ c(
      "text",
      {
        textAnchor: y,
        alignmentBaseline: "middle",
        style: {
          fontFamily: "sans-serif",
          fontSize: "11px",
          fill: "#333",
          pointerEvents: "none"
        },
        children: s.map((b, n) => /* @__PURE__ */ c("tspan", { x: 0, dy: n === 0 ? 0 : `${r}px`, children: b }, n))
      }
    ) });
  }, M = (() => {
    const t = !i && p && u || i && x === "Mobile" && u, a = !i && h && u || i && x === "Tablet" && u, l = {
      mobile: {
        marginLeft: e == null ? void 0 : e.mobileMarginLeft,
        marginTop: e == null ? void 0 : e.mobileMarginTop,
        marginRight: e == null ? void 0 : e.mobileMarginRight,
        marginBottom: e == null ? void 0 : e.mobileMarginBottom
      },
      tablet: {
        marginLeft: e == null ? void 0 : e.tabletMarginLeft,
        marginTop: e == null ? void 0 : e.tabletMarginTop,
        marginRight: e == null ? void 0 : e.tabletMarginRight,
        marginBottom: e == null ? void 0 : e.tabletMarginBottom
      }
    };
    return t ? l.mobile : a ? l.tablet : { marginLeft: O, marginTop: V, marginRight: z, marginBottom: F };
  })(), se = {
    top: M.marginTop,
    right: M.marginRight,
    bottom: M.marginBottom,
    left: M.marginLeft
  }, ne = d.keys.map((t) => ({
    id: t,
    label: t,
    color: L.includes(t) ? xe : U.getColorByKey(t),
    enabled: !L.includes(t)
  }));
  return /* @__PURE__ */ g("div", { style: { height: H }, className: "radar", children: [
    /* @__PURE__ */ c(
      ue,
      {
        data: d.data,
        keys: te(d.keys),
        indexBy: d.indexBy,
        margin: se,
        curve: j,
        maxValue: "auto",
        valueFormat: (t) => T.formatNumber(m.style === "percent" ? t / 100 : t, m),
        borderColor: { from: "color" },
        gridLevels: D,
        gridShape: _,
        gridLabelOffset: Number.parseInt(q, 10),
        gridLabel: le,
        enableDots: G,
        dotSize: Q,
        dotBorderWidth: 2,
        enableDotLabel: Z,
        dotLabelYOffset: C,
        dotLabel: (t) => T.formatNumber(
          m.style === "percent" ? t.value / 100 : t.value,
          m
        ),
        fillOpacity: J,
        borderWidth: K,
        blendMode: "multiply",
        motionConfig: "wobbly",
        theme: {
          tooltip: {
            basic: { background: "#EEE", whiteSpace: "pre", display: "flex" },
            tableCell: { padding: "3px 5px" }
          }
        },
        layers: [
          "grid",
          re,
          "markers",
          "areas",
          "lines",
          "layers",
          "slices",
          "dots",
          "axes",
          "legends",
          "mesh",
          "annotations"
        ]
      }
    ),
    /* @__PURE__ */ c(
      be,
      {
        filter: L,
        showLegends: $,
        chartLegends: ne,
        legendLabel: I,
        legendPosition: w,
        legendCheckBack: W,
        legendLabelBack: Y,
        legendLabelColor: P,
        onToggle: ae,
        reverseLegend: X
      }
    )
  ] });
}, Be = he(ye);
export {
  Be as default
};
