'use client';
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react/jsx-no-bind */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react';
import { pie as d3Pie } from 'd3-shape';
import { Arc } from '../Arc/index';
import { usePieStyles } from './usePieStyles.styles';
import { wrapTextInsideDonut } from '../../../utilities/index';
const TEXT_PADDING = 5;
// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.
/**
 * Pie component within Donut Chart.
 * {@docCategory PieDonutChart}
 */ export const Pie = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    React.useEffect(()=>{
        wrapTextInsideDonut(classes.insideDonutString, props.innerRadius * 2 - TEXT_PADDING);
    }, []);
    let _totalValue;
    const classes = usePieStyles(props);
    const pieForFocusRing = d3Pie().sort(null)// eslint-disable-next-line @typescript-eslint/no-explicit-any
    .value((d)=>d.data).padAngle(0);
    function _focusCallback(data, id, e, targetElement) {
        props.onFocusCallback(data, id, e, targetElement);
    }
    function _hoverCallback(data, e, targetElement) {
        props.hoverOnCallback(data, e, targetElement);
    }
    function _computeTotalValue() {
        let totalValue = 0;
        props.data.forEach((arc)=>{
            totalValue += arc.data;
        });
        return totalValue;
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    function arcGenerator(d, i, focusData, href) {
        const color = d && d.data && d.data.color;
        return /*#__PURE__*/ React.createElement(Arc, {
            key: i,
            data: d,
            focusData: focusData,
            innerRadius: props.innerRadius,
            outerRadius: props.outerRadius,
            color: color,
            onFocusCallback: _focusCallback,
            hoverOnCallback: _hoverCallback,
            onBlurCallback: props.onBlurCallback,
            hoverLeaveCallback: props.hoverLeaveCallback,
            uniqText: props.uniqText,
            activeArc: props.activeArc,
            href: href,
            calloutId: props.calloutId,
            valueInsideDonut: props.valueInsideDonut,
            focusedArcId: props.focusedArcId,
            showLabelsInPercent: props.showLabelsInPercent,
            totalValue: _totalValue,
            hideLabels: props.hideLabels
        });
    }
    const { data } = props;
    // Filter out data points with value 0 to avoid gaps in the donut chart
    const filteredData = data.filter((d)=>d.data !== 0);
    const focusData = pieForFocusRing(filteredData.map((d)=>d.data));
    const piechart = d3Pie().sort(null)// eslint-disable-next-line @typescript-eslint/no-explicit-any
    .value((d)=>d.data).padAngle(0.02)(filteredData);
    const translate = `translate(${props.width / 2}, ${props.height / 2})`;
    _totalValue = _computeTotalValue();
    return /*#__PURE__*/ React.createElement("g", {
        transform: translate
    }, piechart.map((d, i)=>arcGenerator(d, i, focusData[i], props.href)), props.valueInsideDonut && /*#__PURE__*/ React.createElement("text", {
        y: 5,
        textAnchor: "middle",
        dominantBaseline: "middle",
        className: classes.insideDonutString
    }, props.valueInsideDonut));
});
Pie.displayName = 'Pie';
