import React, { useMemo } from "react";
import { useRootElement } from "../context";
import * as styles from "./styles";
/**
 * Note: This component is based on this article:
 * https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
 *
 * Please read this for a better understanding of how this works.
 */
export const Donut = () => {
    const { data, colors, icon } = useRootElement();
    const total = data.reduce((acc, curr) => acc + curr, 0);
    const segments = useMemo(() => data.map((value, index) => {
        var _a;
        const valuePercent = (value / total) * 100;
        const isOver50 = valuePercent > 50;
        const offset = data
            .slice(0, index)
            .reduce((acc, curr) => acc + curr, 0);
        const degrees = (offset / total) * 360;
        const beforeElDegrees = (value / total) * 360;
        const clipPathA = isOver50 ? "-100%" : "0%";
        const clipPathB = isOver50 ? "200%" : "100%";
        const clipPath = `polygon(${clipPathA} ${clipPathA}, ${clipPathB} ${clipPathA}, ${clipPathB} ${clipPathB}, ${clipPathA} ${clipPathB})`;
        return (React.createElement("div", { key: `segment-${index}`, className: "ll-donut-segment", style: {
                "--ll-chart-donut-segment-clip-path": clipPath,
                "--ll-chart-donut-segment-bg": (_a = colors === null || colors === void 0 ? void 0 : colors[index]) !== null && _a !== void 0 ? _a : "#000",
                "--ll-chart-donut-segment-degrees": degrees,
                "--ll-chart-donut-segment-before-degrees": beforeElDegrees,
                "--ll-chart-donut-segment-opacity": isOver50 ? 1 : 0,
            } }));
    }), [data, colors]);
    return (React.createElement("div", { className: styles.container },
        segments,
        React.createElement("div", { className: styles.hole },
            React.createElement("div", { className: styles.iconContainer }, icon))));
};
//# sourceMappingURL=index.js.map