import { jsx as r, jsxs as p, Fragment as L } from "react/jsx-runtime";
import { useState as l, useEffect as M } from "react";
import { injectIntl as pe } from "react-intl";
import { ResponsivePie as ue } from "@nivo/pie";
import fe, { formatContent as ge } from "./Tooltip.js";
import "@nivo/colors";
import "d3";
import { v4 as he } from "uuid";
import be from "../../layout/FlexWrapDetector.js";
import Le from "../../utils/deviceType.js";
const $ = Le() === "mobile", xe = ({
  legends: ke,
  marginLeft: j,
  marginTop: x,
  marginRight: w,
  marginBottom: k,
  options: u,
  intl: f,
  format: g,
  colors: ve,
  groupMode: Ce,
  tooltipEnabled: B,
  height: I,
  showLegends: v,
  legendPosition: a,
  tickRotation: ye,
  tickColor: Ne,
  tooltip: s,
  startAngle: z,
  endAngle: O,
  legendLabel: C,
  legendCheckBack: y,
  legendLabelBack: V,
  legendLabelColor: R,
  centerLabel: H,
  showArcLabels: E,
  showArcLinkLabels: X,
  slicePadding: Y,
  colorGenerator: N,
  centerLabelFontWeight: q,
  centerLabelFontSize: J,
  centerLabelXOffset: K,
  centerLabelYOffset: Q,
  tooltipEnableMarkdown: U,
  reverseLegend: Z,
  showPercentage: _
}) => {
  const [c, G] = l([]), [P, ee] = l(s), [o, te] = l(u), [S, re] = l(50), [T, ae] = l(x), [Se, A] = l(0), [D, ne] = l(k), d = o.data.sort((e, t) => e.position && t.position ? e.position - t.position : 0).map((e, t) => ({
    color: N.getColor(e.id, e),
    id: e.id,
    label: e.label
  }));
  M(() => {
    ee(s), te({
      ...u,
      id: he()
    });
  }, [s, u]), M(() => {
    (() => {
      const n = 5 * Math.max(d.length - 5, 0);
      re(n);
    })();
  }, [d]);
  const oe = {
    bottom: `-${S}px`
  }, le = {
    bottom: `-${S}px`,
    gap: "0px"
  }, ie = (e) => {
    const t = c.slice();
    if (t.indexOf(e) > -1) {
      const n = t.indexOf(e);
      t.splice(n, 1);
    } else
      t.push(e);
    G(t);
  }, se = (e) => c ? e.filter((t) => c.indexOf(t.id) === -1) : e;
  if (!o || !o.data)
    return null;
  const ce = {
    top: T,
    right: w,
    bottom: D,
    left: j
  }, W = () => /* @__PURE__ */ r(L, { children: v && C && /* @__PURE__ */ r("div", { className: "legend item", children: /* @__PURE__ */ r("label", { className: "legend-title", children: C }) }) }), F = () => (Z && d.reverse(), /* @__PURE__ */ r(L, { children: v && d.map((e) => /* @__PURE__ */ p("div", { className: "legend item", onClick: () => ie(e.id), children: [
    /* @__PURE__ */ r(
      "input",
      {
        className: "ignore",
        type: "checkbox",
        checked: c.length == 0 || !c.includes(e.id)
      }
    ),
    /* @__PURE__ */ r(
      "span",
      {
        className: y ? "checkmark-with-bg" : "checkmark",
        style: {
          backgroundColor: y == !0 ? e.color : "transparent"
        }
      }
    ),
    /* @__PURE__ */ r(
      "label",
      {
        style: {
          backgroundColor: V == !0 ? e.color : "transparent",
          color: R
        },
        children: e.label
      }
    )
  ] })) })), de = (e) => {
    const { centerX: t, centerY: n } = e, i = H.split(/[\r\n]/g);
    let m = 0;
    return e.dataWithArc && (m = e.dataWithArc.reduce(
      function(h, b) {
        return h + b.value;
      },
      0
    )), /* @__PURE__ */ r(
      "text",
      {
        x: t,
        y: n,
        textAnchor: "start",
        dominantBaseline: "central",
        children: i.map((h, b) => /* @__PURE__ */ r(
          "tspan",
          {
            x: t + parseInt(K),
            y: n + parseInt(Q) + b * 20,
            style: {
              fontSize: J + "px",
              fontWeight: q,
              fill: "#000"
            },
            children: ge(h, { totalValue: m }, f)
          }
        ))
      }
    );
  }, me = (e, t) => {
    if (t) {
      const n = e.reduce((i, m) => i + m.value, 0);
      return e.map((i) => ({
        ...i,
        value: i.value / n * 100
      }));
    }
    return e;
  };
  return /* @__PURE__ */ r("div", { style: { height: I }, className: "pie-chart", children: o && o.data && o.data.length > 0 && /* @__PURE__ */ p(L, { children: [
    /* @__PURE__ */ r(
      ue,
      {
        data: se(me(o.data, _)),
        margin: ce,
        startAngle: z,
        endAngle: O,
        sortByValue: !0,
        innerRadius: 0.7,
        padAngle: Y,
        cornerRadius: 3,
        colors: (e) => N.getColor(e.id, e.data),
        borderWidth: 1,
        borderColor: { from: "color", modifiers: [["brighter", "2"]] },
        enableArcLabels: E,
        enableArcLinkLabels: X,
        arcLabelsTextColor: "#333333",
        arcLinkLabelsSkipAngle: 5,
        arcLabelsSkipAngle: 15,
        sliceLabelsSkipAngle: 20,
        arcLabel: (e) => f.formatNumber(
          g.style === "percent" ? e.value / 100 : e.value,
          g
        ),
        radialLabelsSkipAngle: 20,
        radialLabelsTextColor: "#333333",
        radialLabelsLinkOffset: 1,
        radialLabelsLinkDiagonalLength: 5,
        radialLabelsLinkHorizontalLength: 16,
        radialLabelsLinkStrokeWidth: 1,
        radialLabelsLinkColor: { from: "color" },
        arcLinkLabel: (e) => e.label,
        layers: [
          "arcLinkLabels",
          "arcs",
          "arcLabels",
          "legends",
          de
        ],
        animate: !0,
        motionStiffness: 90,
        motionDamping: 15,
        legends: [],
        labelTextColor: { from: "color", modifiers: [["darker", 1.6]] },
        tooltip: (e) => {
          if (e.datum && e.datum.data && e.datum.data.variables) {
            const t = e.datum.arc.angleDeg / 360 * 100;
            e.datum.data.variables.valuePercent = t, e.datum.data.variables.category = e.datum.id;
          }
          return B && s && s.trim().length > 0 ? /* @__PURE__ */ r(
            fe,
            {
              intl: f,
              format: g,
              d: e,
              tooltip: P,
              tooltipEnableMarkdown: U
            }
          ) : null;
        }
      },
      o.id
    ),
    (a === "top" || a === "bottom") && /* @__PURE__ */ r(
      "div",
      {
        className: `legends container has-standard-12-font-size ${a}`,
        style: a === "top" ? { marginTop: $ && `${T}px` } : a === "bottom" ? { marginBottom: `${D}px` } : {},
        children: /* @__PURE__ */ p("div", { className: "legend-sections", children: [
          /* @__PURE__ */ r("div", { className: "title-section", children: W() }),
          /* @__PURE__ */ r(
            be,
            {
              onWrapChange: (e) => {
                a === "top" && $ ? (ae(x + e / 2 * 40), A(e)) : (ne(k + e / 2 * 25), A(e));
              },
              className: "legends container has-standard-12-font-size items-section",
              children: F()
            }
          )
        ] })
      }
    ),
    (a === "right" || a === "left") && /* @__PURE__ */ p(
      "div",
      {
        className: `legends container has-standard-12-font-size  ${a}`,
        style: a === "right" ? oe : le,
        children: [
          W(),
          F()
        ]
      }
    )
  ] }) });
}, Ie = pe(xe);
export {
  Ie as default
};
