import { jsxs as f, jsx as r } from "react/jsx-runtime";
import { parseCssVariable as w } from "./index-css-variables-parser.js";
import { translationService as L } from "./index-translation.service.js";
import { ChartsPlaceholder as N } from "./index-ChartsPlaceholder.js";
import { ComponentContainer as k } from "./index-ComponentContainer.js";
import { Render as F } from "./index-Render.js";
import { Text as u } from "./index-Text.js";
import { useState as z } from "react";
import A from "./index-react-apexcharts.min.js";
import h from "./index-DonutChart.module.scss.js";
const Z = (g) => {
  const {
    series: n,
    labels: i = [],
    colors: s = [],
    renderChildrenFn: m,
    renderChildrenNotHoveredFn: a,
    testId: C,
    isLoading: v,
    showLegend: d = !1
  } = g, [b, c] = z(null), p = (e) => e.map((t) => w(t)), y = (e) => e.map((t) => L.get(t).value), o = (e) => {
    if (e === -1 && a) {
      c(a());
      return;
    }
    if (m) {
      c(m(e, n[e], i[e], s[e]));
      return;
    }
    c(f("div", {
      children: [r(u, {
        children: i[e]
      }), r(u, {
        children: n[e]
      })]
    }));
  }, x = {
    ...i.length ? {
      labels: y(i)
    } : {},
    fill: {
      ...s.length ? {
        colors: p(s)
      } : {}
      // Colors of the donut slices
    },
    dataLabels: {
      enabled: !1
      // Data on the donut slices
    },
    chart: {
      events: {
        dataPointSelection: function(e, t, l) {
          o(l.dataPointIndex);
        },
        dataPointMouseEnter: function(e, t, l) {
          o(l.dataPointIndex);
        },
        dataPointMouseLeave: function() {
          a && o(-1);
        },
        mounted: function() {
          if (a)
            o(-1);
          else {
            let e = 0;
            for (let t = 0; t < n.length; t++)
              if (n[t] != 0) {
                e = t;
                break;
              }
            o(e);
          }
        }
      }
    },
    tooltip: {
      enabled: !1,
      fillSeriesColor: !1,
      theme: "light",
      marker: {
        show: !1
      },
      style: {
        fontSize: "inherit",
        fontFamily: "inherit"
      }
    },
    legend: {
      show: d,
      position: "bottom",
      horizontalAlign: "center",
      formatter: (e, t) => {
        const l = t.seriesIndex, P = `${(n[l] / n.reduce((S, I) => S + I, 0) * 100).toFixed(1)}%`;
        return `<div class="legend-labels">${e}<br/><span class="legend-percentage">${P}</span></div>`;
      },
      markers: {
        fillColors: p(s)
      }
    },
    plotOptions: {
      pie: {
        startAngle: 0,
        endAngle: 360,
        customScale: 1.08,
        expandOnClick: !1,
        donut: {
          size: "85%"
        }
      }
    },
    states: {
      normal: {
        filter: {
          type: "none",
          value: 0
        }
      },
      hover: {
        filter: {
          type: "lighten",
          value: 0.05
        }
      },
      active: {
        allowMultipleDataPointsSelection: !1,
        filter: {
          type: "none",
          value: 0
        }
      }
    }
  };
  return f(k, {
    className: h.donut,
    testId: C ?? "DonutChart",
    style: {
      height: d ? 203 : ""
    },
    children: [r(F, {
      if: v,
      children: r(N, {})
    }), f("div", {
      className: h.innerContainer,
      style: {
        width: d ? 280 : ""
      },
      children: [r(A, {
        type: "donut",
        options: x,
        series: n
      }), r("div", {
        className: h.children,
        children: b
      })]
    })]
  });
};
export {
  Z as DonutChart
};
