import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import Typography from '../../Typography/Typography.js';

const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
    const startX = centerX + radius * Math.cos(startAngle);
    const startY = centerY + radius * Math.sin(startAngle);
    const endX = centerX + radius * Math.cos(endAngle);
    const endY = centerY + radius * Math.sin(endAngle);
    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
};
const MultiRadialChart = ({ radius, lineWidth, lineCap, barValues, labelHeading, legendType = 'numberLegend', isLegendDetails = true, isPillValueVisible = true, chartToLegendGap = '16px', legendGap = '8px', labelFontSize = 12, subLabelFontSize = 8, gapBetweenArch = 10, capsuleStyle = { padding: '4px' }, }) => {
    const [tooltip, setTooltip] = useState({
        visible: false,
        x: 0,
        y: 0,
        content: '',
        isArc: false,
    });
    const [hoveredLegend, setHoveredLegend] = useState(null);
    const renderGradients = () => (jsx("defs", { children: barValues.map((bar, i) => Array.isArray(bar.arcColor) ? (jsx("linearGradient", { id: `gradient-${i}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", gradientTransform: "rotate(90)", children: bar.arcColor.map((color, idx) => (jsx("stop", { offset: `${(idx / (bar.arcColor.length - 1)) * 100}%`, stopColor: color }, idx))) }, `gradient-${i}`)) : null) }));
    const getArcColor = (bar, index) => Array.isArray(bar.arcColor) ? `url(#gradient-${index})` : bar.arcColor;
    const getLegendColor = (bar) => Array.isArray(bar.arcColor) ? bar.arcColor[0] : bar.arcColor;
    const parseValueToMB = (value) => {
        if (typeof value === 'string') {
            const match = value.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);
            if (!match)
                return 0;
            const numericValue = parseFloat(match[1] ?? '0');
            const unit = match[2]?.toUpperCase() || '';
            if (isNaN(numericValue))
                return 0;
            switch (unit) {
                case 'TB':
                    return numericValue * 1024 * 1024;
                case 'GB':
                    return numericValue * 1024;
                case 'MB':
                    return numericValue;
                case 'KB':
                    return numericValue / 1024;
                default:
                    return numericValue;
            }
        }
        else {
            return value;
        }
    };
    const normalizedBarValues = barValues.map((item) => {
        if (typeof item.value === 'string') {
            const parsedValue = parseValueToMB(item.value);
            const normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
            return {
                ...item,
                normalizedValue,
                labelValue: Number.isInteger(normalizedValue)
                    ? normalizedValue
                    : normalizedValue.toFixed(2),
            };
        }
        return {
            ...item,
            normalizedValue: item.value,
            labelValue: Number.isInteger(item.value)
                ? item.value
                : item.value?.toFixed(2),
        };
    });
    const totalBarValue = normalizedBarValues.reduce((acc, status) => acc + status.normalizedValue, 0);
    const baseRadius = radius;
    const radiusIncrement = lineWidth + gapBetweenArch;
    const maxRadius = baseRadius + radiusIncrement * (normalizedBarValues.length - 1);
    const svgSize = 2 * (maxRadius + lineWidth);
    const reversedBarValues = [...normalizedBarValues].reverse();
    const labelLines = labelHeading.trim().split(' ');
    const renderLegend = (legendData, legendType) => {
        switch (legendType) {
            case 'numberLegend':
                return (jsx("div", { className: "ff-legend-container ff-number-legend", style: { gap: legendGap }, children: legendData.map((item, index) => (jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
                            setHoveredLegend(item.barLabel || item.label);
                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
                            setHoveredLegend(null);
                            handleMouseLeave();
                        }, children: [jsx(Typography, { fontSize: 20, fontWeight: "semi-bold", className: "ff-legend-value", color: getLegendColor(item), children: item.key.padStart(2, '0') }), jsx(Typography, { fontSize: 10, className: "ff-legend-key", color: "var(--text-color)", children: item.label })] }, index))) }));
            case 'pillLegend':
                return (jsx("div", { className: "ff-legend-container ff-pill-legend", style: { gap: legendGap }, children: legendData
                        .slice()
                        .reverse()
                        .map((item, index) => (jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
                            setHoveredLegend(item.barLabel || item.label);
                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
                            setHoveredLegend(null);
                            handleMouseLeave();
                        }, children: [jsx("span", { className: "ff-legend-capsule", style: { backgroundColor: getLegendColor(item) }, children: jsx(Typography, { fontSize: 10, color: "var(--tooltip-text-color)", style: capsuleStyle, children: isPillValueVisible && item.value }) }), jsx(Typography, { className: "ff-legend-key", children: item.label })] }, index))) }));
            default:
                return null;
        }
    };
    const handleMouseEnter = (e, content, isArc) => {
        const { clientX, clientY } = e;
        setTooltip({
            visible: true,
            x: clientX,
            y: clientY,
            content: content,
            isArc,
        });
    };
    const handleMouseMove = (e) => {
        const { clientX, clientY } = e;
        setTooltip((prev) => ({
            ...prev,
            x: clientX,
            y: clientY,
        }));
    };
    const handleMouseLeave = () => {
        setTooltip({ visible: false, x: 0, y: 0, content: '', isArc: false });
    };
    const textData = (text, maxLength) => {
        return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
    };
    const getArcColorFromTooltip = () => {
        if (!tooltip.visible)
            return '';
        const valueString = tooltip.content.split(':')[0]?.trim();
        if (valueString === undefined)
            return '';
        const matchingBar = normalizedBarValues.find((val) => val.barLabel === valueString);
        if (!matchingBar)
            return '';
        const chartItem = {
            ...matchingBar,
            label: matchingBar.barLabel,
            key: matchingBar.labelValue?.toString() ?? '',
        };
        return getLegendColor(chartItem);
    };
    const DEFAULT_LINE_HEIGHT = 18;
    return (jsxs("div", { className: `ff-multi-radial-chart-container ${legendType === 'numberLegend'
            ? 'ff-multi-radial-chart-number'
            : 'ff-multi-radial-chart-pill'}`, style: { gap: chartToLegendGap }, children: [jsx("div", { className: "relative", style: { width: svgSize, height: svgSize }, children: jsxs("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, className: "absolute top-0 left-0", children: [renderGradients(), jsxs("g", { transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`, children: [reversedBarValues.map((values, i) => {
                                    const originalIndex = normalizedBarValues.length - 1 - i;
                                    const percentage = values.normalizedValue / totalBarValue;
                                    const angleIncrement = percentage * 2 * Math.PI;
                                    let startAngle = -Math.PI / 2;
                                    let endAngle = startAngle + angleIncrement;
                                    if (values.normalizedValue === totalBarValue) {
                                        startAngle = 0;
                                        endAngle = 2 * Math.PI;
                                    }
                                    const currentRadius = baseRadius + radiusIncrement * originalIndex;
                                    const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
                                    const arcStyle = {
                                        opacity: hoveredLegend !== null
                                            ? values.barLabel === hoveredLegend
                                                ? 1
                                                : 0.2
                                            : 1,
                                        transition: 'opacity 0.3s ease',
                                    };
                                    // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
                                    if (values.normalizedValue === 0) {
                                        const dotX = currentRadius * Math.cos(-Math.PI / 2);
                                        const dotY = currentRadius * Math.sin(-Math.PI / 2);
                                        return (jsxs("g", { children: [jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), jsx("circle", { cx: dotX, cy: dotY, r: lineWidth + 1, fill: getArcColor({
                                                        ...values,
                                                        label: values.barLabel || '',
                                                        key: values.labelValue?.toString() || '',
                                                    }, originalIndex), onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: arcStyle })] }, originalIndex));
                                    }
                                    const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
                                    return (jsxs("g", { children: [jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), jsx("path", { d: foregroundArcPath, fill: "none", stroke: getArcColor({
                                                    ...values,
                                                    label: values.barLabel || '',
                                                    key: values.labelValue?.toString() || '',
                                                }, originalIndex), strokeWidth: lineWidth, strokeLinecap: lineCap === 'square' ? 'butt' : 'round', onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'stroke', ...arcStyle } })] }, originalIndex));
                                }), jsx("text", { x: "0", y: `-${lineWidth + gapBetweenArch + 2}`, fill: getArcColorFromTooltip(), textAnchor: "middle", dominantBaseline: "central", children: tooltip.visible ? (jsxs(Fragment, { children: [jsx("tspan", { x: "0", dy: "0", className: "ff-center-text-tooltip", children: textData(tooltip.content.split(':')[1]?.trim() || '', 9) }), tooltip.content
                                                .split(':')[0]
                                                ?.split(' ')
                                                .map((word, i) => (jsx("tspan", { x: "0", dy: i === 0
                                                    ? `${lineWidth + gapBetweenArch + 5}`
                                                    : DEFAULT_LINE_HEIGHT, className: "ff-center-text-tooltip", children: word }, i)))] })) : (jsx(Fragment, { children: labelLines.map((line, index) => {
                                            if (index === 0) {
                                                const [firstWord, ...restWords] = line.split(' ');
                                                return (jsxs("tspan", { children: [jsx("tspan", { x: "0", dy: "0", style: { fontSize: `${labelFontSize}px` }, className: "ff-center-first-text", children: firstWord }), jsx("tspan", { x: "0", dy: DEFAULT_LINE_HEIGHT, style: { fontSize: `${subLabelFontSize}px` }, className: "ff-center-text", children: restWords.join(' ') })] }, index));
                                            }
                                            return (jsx("tspan", { x: "0", dy: index === 0 ? 0 : DEFAULT_LINE_HEIGHT, className: "ff-center-text", style: { fontSize: `${subLabelFontSize}px` }, children: line }, index));
                                        }) })) })] })] }) }), tooltip.visible && (jsx("div", { className: "ff-multi-radial-tooltip", style: {
                    position: 'fixed',
                    top: `${tooltip.y + 10}px`,
                    left: `${tooltip.x + 15}px`,
                    zIndex: 1000,
                    pointerEvents: 'none',
                }, children: tooltip.content })), isLegendDetails &&
                renderLegend(normalizedBarValues.map((value) => ({
                    ...value,
                    label: value?.barLabel,
                    key: value.labelValue?.toString(),
                })), legendType)] }));
};

export { MultiRadialChart as default };
//# sourceMappingURL=MultiRadialChart.js.map
