'use client';
import * as React from 'react';
import { usePolarChartStyles } from './usePolarChartStyles.styles';
import { useImageExport } from '../../utilities/hooks';
import { pointRadial as d3PointRadial, areaRadial as d3AreaRadial, lineRadial as d3LineRadial, curveLinearClosed as d3CurveLinearClosed } from 'd3-shape';
import { tokens } from '@fluentui/react-theme';
import { Legends } from '../Legends/index';
import { createRadialScale, getContinuousScaleDomain, getScaleType, EPSILON, createAngularScale, formatAngle } from './PolarChart.utils';
import { ChartPopover } from '../CommonComponents/ChartPopover';
import { getColorFromToken, getCurveFactory, getNextColor, isPlottable, sortAxisCategories } from '../../utilities/index';
import { extent as d3Extent } from 'd3-array';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { formatToLocaleString } from '@fluentui/chart-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
const DEFAULT_LEGEND_HEIGHT = 32;
const LABEL_WIDTH = 36;
const LABEL_HEIGHT = 16;
const LABEL_OFFSET = 10;
const TICK_SIZE = 6;
const MIN_MARKER_SIZE_PX = 2;
const MAX_MARKER_SIZE_PX = 16;
const MIN_MARKER_SIZE_PX_MARKERS_ONLY = 4;
export const PolarChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    var _props_legendProps, _props_legendProps1, _props_radialAxis, _props_angularAxis, _props_radialAxis1, _props_radialAxis2, _props_radialAxis3, _props_radialAxis4, _props_radialAxis5, _props_radialAxis6, _props_radialAxis7, _props_radialAxis8, _props_radialAxis9, _props_angularAxis1, _props_angularAxis2, _props_angularAxis3, _props_angularAxis4, _props_angularAxis5, _props_angularAxis6, _props_angularAxis7, _props_angularAxis8, _props_angularAxis9, _props_angularAxis10;
    const { chartContainerRef, legendsRef } = useImageExport(props.componentRef, props.hideLegend, false);
    const legendContainerRef = React.useRef(null);
    const { targetDocument } = useFluent();
    const _window = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
    const [containerWidth, setContainerWidth] = React.useState(200);
    const [containerHeight, setContainerHeight] = React.useState(200);
    const [legendContainerHeight, setLegendContainerHeight] = React.useState(props.hideLegend ? 0 : DEFAULT_LEGEND_HEIGHT);
    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
    const [popoverTarget, setPopoverTarget] = React.useState(null);
    const [popoverXValue, setPopoverXValue] = React.useState('');
    const [popoverLegend, setPopoverLegend] = React.useState('');
    const [popoverColor, setPopoverColor] = React.useState('');
    const [popoverYValue, setPopoverYValue] = React.useState('');
    const [hoveredLegend, setHoveredLegend] = React.useState('');
    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
    const [activePoint, setActivePoint] = React.useState('');
    React.useEffect(()=>{
        if (chartContainerRef.current) {
            const { width, height } = chartContainerRef.current.getBoundingClientRect();
            setContainerWidth(width);
            setContainerHeight(height);
        }
    }, [
        chartContainerRef
    ]);
    React.useEffect(()=>{
        if (props.hideLegend) {
            setLegendContainerHeight(0);
        } else if (legendContainerRef.current) {
            const { height } = legendContainerRef.current.getBoundingClientRect();
            const marginTop = (_window === null || _window === void 0 ? void 0 : _window.getComputedStyle(legendContainerRef.current).marginTop) || '0px';
            setLegendContainerHeight(Math.max(height, DEFAULT_LEGEND_HEIGHT) + parseFloat(marginTop));
        }
    }, [
        props.hideLegend,
        _window
    ]);
    React.useEffect(()=>{
        var _props_legendProps;
        setSelectedLegends(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
    }, [
        (_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends
    ]);
    const margins = React.useMemo(()=>({
            left: LABEL_OFFSET + LABEL_WIDTH,
            right: LABEL_OFFSET + LABEL_WIDTH,
            top: LABEL_OFFSET + LABEL_HEIGHT,
            bottom: LABEL_OFFSET + LABEL_HEIGHT,
            ...props.margins
        }), [
        props.margins
    ]);
    const svgWidth = React.useMemo(()=>props.width || containerWidth, [
        props.width,
        containerWidth
    ]);
    const svgHeight = React.useMemo(()=>(props.height || containerHeight) - legendContainerHeight, [
        props.height,
        containerHeight,
        legendContainerHeight
    ]);
    const outerRadius = React.useMemo(()=>Math.min(svgWidth - (margins.left + margins.right), svgHeight - (margins.top + margins.bottom)) / 2, [
        svgWidth,
        svgHeight,
        margins
    ]);
    const innerRadius = React.useMemo(()=>Math.max(0, Math.min(Math.abs(props.hole || 0), 1)) * outerRadius, [
        props.hole,
        outerRadius
    ]);
    const legendColorMap = React.useRef({});
    const chartData = React.useMemo(()=>{
        legendColorMap.current = {};
        let colorIndex = 0;
        const renderingOrder = [
            'areapolar',
            'linepolar',
            'scatterpolar'
        ];
        return props.data.map((series)=>{
            const seriesColor = series.color ? getColorFromToken(series.color) : getNextColor(colorIndex++, 0);
            if (!(series.legend in legendColorMap.current)) {
                legendColorMap.current[series.legend] = seriesColor;
            }
            return {
                ...series,
                color: seriesColor,
                data: series.data.map((point)=>{
                    return {
                        ...point,
                        color: point.color ? getColorFromToken(point.color) : seriesColor
                    };
                })
            };
        }).sort((a, b)=>{
            return renderingOrder.indexOf(a.type) - renderingOrder.indexOf(b.type);
        });
    }, [
        props.data
    ]);
    const mapCategoryToValues = React.useCallback((isAngularAxis)=>{
        const categoryToValues = {};
        chartData.forEach((series)=>{
            series.data.forEach((point)=>{
                const category = isAngularAxis ? point.theta : point.r;
                if (!categoryToValues[category]) {
                    categoryToValues[category] = [];
                }
                const value = isAngularAxis ? point.r : point.theta;
                if (typeof value === 'number') {
                    categoryToValues[category].push(value);
                }
            });
        });
        return categoryToValues;
    }, [
        chartData
    ]);
    const getOrderedRCategories = React.useCallback(()=>{
        var _props_radialAxis;
        return sortAxisCategories(mapCategoryToValues(), (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.categoryOrder);
    }, [
        mapCategoryToValues,
        (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.categoryOrder
    ]);
    const getOrderedACategories = React.useCallback(()=>{
        var _props_angularAxis;
        return sortAxisCategories(mapCategoryToValues(true), (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.categoryOrder);
    }, [
        mapCategoryToValues,
        (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.categoryOrder
    ]);
    const rValues = React.useMemo(()=>chartData.flatMap((series)=>series.data.map((point)=>point.r)), [
        chartData
    ]);
    const rScaleType = React.useMemo(()=>{
        var _props_radialAxis;
        return getScaleType(rValues, {
            scaleType: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.scaleType,
            supportsLog: true
        });
    }, [
        rValues,
        (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.scaleType
    ]);
    const rScaleDomain = React.useMemo(()=>{
        var _props_radialAxis, _props_radialAxis1;
        return rScaleType === 'category' ? getOrderedRCategories() : getContinuousScaleDomain(rScaleType, rValues, {
            rangeStart: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.rangeStart,
            rangeEnd: (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.rangeEnd
        });
    }, [
        getOrderedRCategories,
        rScaleType,
        rValues,
        (_props_radialAxis2 = props.radialAxis) === null || _props_radialAxis2 === void 0 ? void 0 : _props_radialAxis2.rangeStart,
        (_props_radialAxis3 = props.radialAxis) === null || _props_radialAxis3 === void 0 ? void 0 : _props_radialAxis3.rangeEnd
    ]);
    const { scale: rScale, tickValues: rTickValues, tickLabels: rTickLabels } = React.useMemo(()=>{
        var _props_radialAxis, _props_radialAxis1, _props_radialAxis2, _props_radialAxis3, _props_radialAxis4, _props_radialAxis5;
        return createRadialScale(rScaleType, rScaleDomain, [
            innerRadius,
            outerRadius
        ], {
            useUTC: props.useUTC,
            tickCount: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.tickCount,
            tickValues: (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.tickValues,
            tickText: (_props_radialAxis2 = props.radialAxis) === null || _props_radialAxis2 === void 0 ? void 0 : _props_radialAxis2.tickText,
            tickFormat: (_props_radialAxis3 = props.radialAxis) === null || _props_radialAxis3 === void 0 ? void 0 : _props_radialAxis3.tickFormat,
            culture: props.culture,
            tickStep: (_props_radialAxis4 = props.radialAxis) === null || _props_radialAxis4 === void 0 ? void 0 : _props_radialAxis4.tickStep,
            tick0: (_props_radialAxis5 = props.radialAxis) === null || _props_radialAxis5 === void 0 ? void 0 : _props_radialAxis5.tick0,
            dateLocalizeOptions: props.dateLocalizeOptions
        });
    }, [
        rScaleType,
        rScaleDomain,
        innerRadius,
        outerRadius,
        props.culture,
        props.dateLocalizeOptions,
        (_props_radialAxis4 = props.radialAxis) === null || _props_radialAxis4 === void 0 ? void 0 : _props_radialAxis4.tick0,
        (_props_radialAxis5 = props.radialAxis) === null || _props_radialAxis5 === void 0 ? void 0 : _props_radialAxis5.tickCount,
        (_props_radialAxis6 = props.radialAxis) === null || _props_radialAxis6 === void 0 ? void 0 : _props_radialAxis6.tickFormat,
        (_props_radialAxis7 = props.radialAxis) === null || _props_radialAxis7 === void 0 ? void 0 : _props_radialAxis7.tickStep,
        (_props_radialAxis8 = props.radialAxis) === null || _props_radialAxis8 === void 0 ? void 0 : _props_radialAxis8.tickText,
        (_props_radialAxis9 = props.radialAxis) === null || _props_radialAxis9 === void 0 ? void 0 : _props_radialAxis9.tickValues,
        props.useUTC
    ]);
    const aValues = React.useMemo(()=>chartData.flatMap((series)=>series.data.map((point)=>point.theta)), [
        chartData
    ]);
    const aScaleType = React.useMemo(()=>{
        var _props_angularAxis;
        return getScaleType(aValues, {
            scaleType: (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.scaleType
        });
    }, [
        aValues,
        (_props_angularAxis1 = props.angularAxis) === null || _props_angularAxis1 === void 0 ? void 0 : _props_angularAxis1.scaleType
    ]);
    const aDomain = React.useMemo(()=>aScaleType === 'category' ? getOrderedACategories() : getContinuousScaleDomain(aScaleType, aValues), [
        getOrderedACategories,
        aScaleType,
        aValues
    ]);
    const { scale: aScale, tickValues: aTickValues, tickLabels: aTickLabels } = React.useMemo(()=>{
        var _props_angularAxis, _props_angularAxis1, _props_angularAxis2, _props_angularAxis3, _props_angularAxis4, _props_angularAxis5, _props_angularAxis6;
        return createAngularScale(aScaleType, aDomain, {
            tickCount: (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.tickCount,
            tickValues: (_props_angularAxis1 = props.angularAxis) === null || _props_angularAxis1 === void 0 ? void 0 : _props_angularAxis1.tickValues,
            tickText: (_props_angularAxis2 = props.angularAxis) === null || _props_angularAxis2 === void 0 ? void 0 : _props_angularAxis2.tickText,
            tickFormat: (_props_angularAxis3 = props.angularAxis) === null || _props_angularAxis3 === void 0 ? void 0 : _props_angularAxis3.tickFormat,
            culture: props.culture,
            tickStep: (_props_angularAxis4 = props.angularAxis) === null || _props_angularAxis4 === void 0 ? void 0 : _props_angularAxis4.tickStep,
            tick0: (_props_angularAxis5 = props.angularAxis) === null || _props_angularAxis5 === void 0 ? void 0 : _props_angularAxis5.tick0,
            direction: props.direction,
            unit: (_props_angularAxis6 = props.angularAxis) === null || _props_angularAxis6 === void 0 ? void 0 : _props_angularAxis6.unit
        });
    }, [
        aScaleType,
        aDomain,
        (_props_angularAxis2 = props.angularAxis) === null || _props_angularAxis2 === void 0 ? void 0 : _props_angularAxis2.tick0,
        (_props_angularAxis3 = props.angularAxis) === null || _props_angularAxis3 === void 0 ? void 0 : _props_angularAxis3.tickCount,
        (_props_angularAxis4 = props.angularAxis) === null || _props_angularAxis4 === void 0 ? void 0 : _props_angularAxis4.tickFormat,
        (_props_angularAxis5 = props.angularAxis) === null || _props_angularAxis5 === void 0 ? void 0 : _props_angularAxis5.tickStep,
        (_props_angularAxis6 = props.angularAxis) === null || _props_angularAxis6 === void 0 ? void 0 : _props_angularAxis6.tickText,
        (_props_angularAxis7 = props.angularAxis) === null || _props_angularAxis7 === void 0 ? void 0 : _props_angularAxis7.tickValues,
        (_props_angularAxis8 = props.angularAxis) === null || _props_angularAxis8 === void 0 ? void 0 : _props_angularAxis8.unit,
        props.culture,
        props.direction
    ]);
    const classes = usePolarChartStyles(props);
    const renderPolarGrid = React.useCallback(()=>{
        const extRTickValues = [];
        const rDomain = rScale.domain();
        if (innerRadius > 0 && rDomain[0] !== rTickValues[0]) {
            extRTickValues.push(rDomain[0]);
        }
        extRTickValues.push(...rTickValues);
        if (rDomain[rDomain.length - 1] !== rTickValues[rTickValues.length - 1]) {
            extRTickValues.push(rDomain[rDomain.length - 1]);
        }
        return /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("g", null, extRTickValues.map((r, rIndex)=>{
            const className = rIndex === extRTickValues.length - 1 ? classes.gridLineOuter : classes.gridLineInner;
            if (props.shape === 'polygon') {
                let d = '';
                aTickValues.forEach((a, aIndex)=>{
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    const radialPoint = d3PointRadial(aScale(a), rScale(r));
                    d += (aIndex === 0 ? 'M' : 'L') + radialPoint.join(',') + ' ';
                });
                d += 'Z';
                return /*#__PURE__*/ React.createElement("path", {
                    key: rIndex,
                    d: d,
                    className: className
                });
            }
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            return /*#__PURE__*/ React.createElement("circle", {
                key: rIndex,
                cx: 0,
                cy: 0,
                r: rScale(r),
                className: className
            });
        })), /*#__PURE__*/ React.createElement("g", null, aTickValues.map((a, aIndex)=>{
            const radialPoint1 = d3PointRadial(aScale(a), innerRadius);
            const radialPoint2 = d3PointRadial(aScale(a), outerRadius);
            return /*#__PURE__*/ React.createElement("path", {
                key: aIndex,
                d: `M${radialPoint1.join(',')} L${radialPoint2.join(',')}`,
                className: classes.gridLineInner
            });
        })));
    }, [
        innerRadius,
        outerRadius,
        rTickValues,
        aTickValues,
        rScale,
        aScale,
        props.shape,
        classes.gridLineInner,
        classes.gridLineOuter
    ]);
    const renderPolarTicks = React.useCallback(()=>{
        const radialAxisAngle = props.direction === 'clockwise' ? 0 : Math.PI / 2;
        const radialAxisStartPoint = d3PointRadial(radialAxisAngle, innerRadius);
        const radialAxisEndPoint = d3PointRadial(radialAxisAngle, outerRadius);
        // (0, pi]
        const sign = radialAxisAngle > EPSILON && radialAxisAngle - Math.PI < EPSILON ? 1 : -1;
        return /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("path", {
            d: `M${radialAxisStartPoint.join(',')} L${radialAxisEndPoint.join(',')}`,
            className: classes.gridLineOuter
        }), rTickValues.map((r, rIndex)=>{
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const [pointX, pointY] = d3PointRadial(radialAxisAngle, rScale(r));
            return /*#__PURE__*/ React.createElement("g", {
                key: rIndex
            }, /*#__PURE__*/ React.createElement("path", {
                d: `M${pointX},${pointY} L${pointX + TICK_SIZE * Math.cos(radialAxisAngle) * sign},${pointY + TICK_SIZE * Math.sin(radialAxisAngle) * sign}`,
                className: classes.gridLineOuter
            }), /*#__PURE__*/ React.createElement("text", {
                x: pointX + (TICK_SIZE + LABEL_OFFSET) * Math.cos(radialAxisAngle) * sign,
                y: pointY + (TICK_SIZE + LABEL_OFFSET) * Math.sin(radialAxisAngle) * sign,
                textAnchor: // pi/2 or 3pi/2
                Math.abs(radialAxisAngle - Math.PI / 2) < EPSILON || Math.abs(radialAxisAngle - 3 * Math.PI / 2) < EPSILON ? 'middle' : radialAxisAngle > EPSILON && radialAxisAngle - Math.PI / 2 < -EPSILON || radialAxisAngle - Math.PI > EPSILON && radialAxisAngle - 3 * Math.PI / 2 < -EPSILON ? 'start' : 'end',
                dominantBaseline: "middle",
                "aria-hidden": true,
                className: classes.tickLabel
            }, rTickLabels[rIndex]));
        })), /*#__PURE__*/ React.createElement("g", null, aTickValues.map((a, aIndex)=>{
            const angle = aScale(a);
            const [pointX, pointY] = d3PointRadial(angle, outerRadius + LABEL_OFFSET);
            return /*#__PURE__*/ React.createElement("text", {
                key: aIndex,
                x: pointX,
                y: pointY,
                textAnchor: Math.abs(angle) < EPSILON || Math.abs(angle - Math.PI) < EPSILON ? 'middle' : angle > Math.PI ? 'end' : 'start',
                dominantBaseline: "middle",
                "aria-hidden": true,
                className: classes.tickLabel
            }, aTickLabels[aIndex]);
        })));
    }, [
        rTickValues,
        aTickValues,
        rScale,
        aScale,
        outerRadius,
        classes.gridLineOuter,
        classes.tickLabel,
        aTickLabels,
        innerRadius,
        rTickLabels,
        props.direction
    ]);
    const getActiveLegends = React.useCallback(()=>{
        return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [
            hoveredLegend
        ] : [];
    }, [
        selectedLegends,
        hoveredLegend
    ]);
    const legendHighlighted = React.useCallback((legendTitle)=>{
        const activeLegends = getActiveLegends();
        return activeLegends.includes(legendTitle) || activeLegends.length === 0;
    }, [
        getActiveLegends
    ]);
    const renderRadialArea = React.useCallback((series)=>{
        var _series_lineOptions;
        const radialArea = d3AreaRadial().angle((d)=>aScale(d.theta)).innerRadius(innerRadius)// eslint-disable-next-line @typescript-eslint/no-explicit-any
        .outerRadius((d)=>rScale(d.r)).curve(getCurveFactory((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.curve, d3CurveLinearClosed))// eslint-disable-next-line @typescript-eslint/no-explicit-any
        .defined((d)=>isPlottable(aScale(d.theta), rScale(d.r)));
        const shouldHighlight = legendHighlighted(series.legend);
        return /*#__PURE__*/ React.createElement("path", {
            d: radialArea(series.data),
            fill: series.color,
            fillOpacity: shouldHighlight ? 0.7 : 0.1,
            pointerEvents: "none"
        });
    }, [
        innerRadius,
        rScale,
        aScale,
        legendHighlighted
    ]);
    const renderRadialLine = React.useCallback((series)=>{
        var _series_lineOptions, _series_lineOptions1, _series_lineOptions2, _series_lineOptions3, _series_lineOptions4;
        const radialLine = d3LineRadial().angle((d)=>aScale(d.theta))// eslint-disable-next-line @typescript-eslint/no-explicit-any
        .radius((d)=>rScale(d.r)).curve(getCurveFactory((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.curve))// eslint-disable-next-line @typescript-eslint/no-explicit-any
        .defined((d)=>isPlottable(aScale(d.theta), rScale(d.r)));
        var _series_lineOptions_strokeWidth;
        return /*#__PURE__*/ React.createElement("path", {
            d: radialLine(series.data),
            fill: "none",
            stroke: series.color,
            strokeOpacity: legendHighlighted(series.legend) ? 1 : 0.1,
            strokeWidth: (_series_lineOptions_strokeWidth = (_series_lineOptions1 = series.lineOptions) === null || _series_lineOptions1 === void 0 ? void 0 : _series_lineOptions1.strokeWidth) !== null && _series_lineOptions_strokeWidth !== void 0 ? _series_lineOptions_strokeWidth : 3,
            strokeDasharray: (_series_lineOptions2 = series.lineOptions) === null || _series_lineOptions2 === void 0 ? void 0 : _series_lineOptions2.strokeDasharray,
            strokeDashoffset: (_series_lineOptions3 = series.lineOptions) === null || _series_lineOptions3 === void 0 ? void 0 : _series_lineOptions3.strokeDashoffset,
            strokeLinecap: (_series_lineOptions4 = series.lineOptions) === null || _series_lineOptions4 === void 0 ? void 0 : _series_lineOptions4.strokeLinecap,
            pointerEvents: "none"
        });
    }, [
        rScale,
        aScale,
        legendHighlighted
    ]);
    const [minMarkerSize, maxMarkerSize] = React.useMemo(()=>d3Extent(chartData.flatMap((series)=>series.data.map((point)=>point.markerSize))), [
        chartData
    ]);
    const showPopover = React.useCallback((event, point, pointId, legend)=>{
        var _props_angularAxis;
        setPopoverTarget(event.currentTarget);
        setPopoverOpen(legendHighlighted(legend));
        var _point_angularAxisCalloutData;
        setPopoverXValue((_point_angularAxisCalloutData = point.angularAxisCalloutData) !== null && _point_angularAxisCalloutData !== void 0 ? _point_angularAxisCalloutData : formatAngle(point.theta, (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.unit));
        setPopoverLegend(legend);
        setPopoverColor(point.color);
        var _point_radialAxisCalloutData;
        setPopoverYValue((_point_radialAxisCalloutData = point.radialAxisCalloutData) !== null && _point_radialAxisCalloutData !== void 0 ? _point_radialAxisCalloutData : formatToLocaleString(point.r, props.culture, props.useUTC));
        setActivePoint(pointId);
    }, [
        legendHighlighted,
        (_props_angularAxis9 = props.angularAxis) === null || _props_angularAxis9 === void 0 ? void 0 : _props_angularAxis9.unit,
        props.culture,
        props.useUTC
    ]);
    const hidePopover = React.useCallback(()=>{
        setPopoverOpen(false);
        setActivePoint('');
    }, []);
    const markersOnlyMode = React.useMemo(()=>chartData.filter((s)=>s.type === 'areapolar' || s.type === 'linepolar').length === 0, [
        chartData
    ]);
    const renderRadialPoints = React.useCallback((series, seriesIndex)=>{
        const shouldHighlight = legendHighlighted(series.legend);
        return /*#__PURE__*/ React.createElement("g", null, series.data.map((point, pointIndex)=>{
            var _props_angularAxis, _point_callOutAccessibilityData;
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            if (!isPlottable(aScale(point.theta), rScale(point.r))) {
                return null;
            }
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const [x, y] = d3PointRadial(aScale(point.theta), rScale(point.r));
            const id = `${seriesIndex}-${pointIndex}`;
            const isActive = activePoint === id;
            const minPx = markersOnlyMode ? MIN_MARKER_SIZE_PX_MARKERS_ONLY : MIN_MARKER_SIZE_PX;
            let radius = minPx;
            if (typeof point.markerSize !== 'undefined' && minMarkerSize !== maxMarkerSize) {
                radius = minPx + (point.markerSize - minMarkerSize) / (maxMarkerSize - minMarkerSize) * (MAX_MARKER_SIZE_PX - minPx);
            }
            const xValue = point.radialAxisCalloutData || formatToLocaleString(point.r, props.culture, props.useUTC);
            const legend = series.legend;
            const yValue = point.angularAxisCalloutData || formatAngle(point.theta, (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.unit);
            const ariaLabel = ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
            return /*#__PURE__*/ React.createElement("circle", {
                key: pointIndex,
                cx: x,
                cy: y,
                r: radius,
                fill: isActive ? tokens.colorNeutralBackground1 : point.color,
                stroke: isActive ? point.color : 'none',
                strokeWidth: isActive ? 2 : 0,
                opacity: shouldHighlight ? 1 : 0.1,
                tabIndex: shouldHighlight ? 0 : -1,
                onMouseOver: (e)=>showPopover(e, point, id, series.legend),
                onFocus: (e)=>showPopover(e, point, id, series.legend),
                role: "img",
                "aria-label": ariaLabel
            });
        }));
    }, [
        legendHighlighted,
        rScale,
        aScale,
        activePoint,
        showPopover,
        minMarkerSize,
        maxMarkerSize,
        markersOnlyMode,
        (_props_angularAxis10 = props.angularAxis) === null || _props_angularAxis10 === void 0 ? void 0 : _props_angularAxis10.unit,
        props.culture,
        props.useUTC
    ]);
    const onLegendSelectionChange = React.useCallback((_selectedLegends, event, currentLegend)=>{
        var _props_legendProps, _props_legendProps1;
        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
            setSelectedLegends(_selectedLegends);
        } else {
            setSelectedLegends(_selectedLegends.slice(-1));
        }
        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
            props.legendProps.onChange(_selectedLegends, event, currentLegend);
        }
    }, [
        props.legendProps
    ]);
    const renderLegends = React.useCallback(()=>{
        if (props.hideLegend) {
            return null;
        }
        const legends = Object.keys(legendColorMap.current).map((legendTitle)=>{
            return {
                title: legendTitle,
                color: legendColorMap.current[legendTitle],
                hoverAction: ()=>{
                    setHoveredLegend(legendTitle);
                },
                onMouseOutAction: ()=>{
                    setHoveredLegend('');
                }
            };
        });
        return /*#__PURE__*/ React.createElement("div", {
            ref: legendContainerRef,
            className: classes.legendContainer
        }, /*#__PURE__*/ React.createElement(Legends, {
            legends: legends,
            centerLegends: true,
            onChange: onLegendSelectionChange,
            legendRef: legendsRef,
            ...props.legendProps
        }));
    }, [
        props.hideLegend,
        props.legendProps,
        legendsRef,
        onLegendSelectionChange,
        classes.legendContainer
    ]);
    const focusAttributes = useArrowNavigationGroup({
        axis: 'horizontal'
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: classes.root,
        ref: chartContainerRef,
        onMouseLeave: hidePopover,
        onBlur: hidePopover
    }, /*#__PURE__*/ React.createElement("div", {
        className: classes.chartWrapper,
        ...focusAttributes
    }, /*#__PURE__*/ React.createElement("svg", {
        className: classes.chart,
        width: svgWidth,
        height: svgHeight,
        role: "region",
        "aria-label": (props.chartTitle ? `${props.chartTitle}. ` : '') + `Polar chart with ${chartData.length} data series.`
    }, /*#__PURE__*/ React.createElement("g", {
        transform: `translate(${svgWidth / 2}, ${svgHeight / 2})`
    }, renderPolarGrid(), /*#__PURE__*/ React.createElement("g", null, chartData.map((series, seriesIndex)=>{
        return /*#__PURE__*/ React.createElement("g", {
            key: seriesIndex,
            role: "region",
            "aria-label": `${series.legend}, series ${seriesIndex + 1} of ${chartData.length} with ${series.data.length} data points.`
        }, series.type === 'areapolar' && renderRadialArea(series), (series.type === 'areapolar' || series.type === 'linepolar') && renderRadialLine(series), renderRadialPoints(series, seriesIndex));
    })), renderPolarTicks()))), renderLegends(), !props.hideTooltip && /*#__PURE__*/ React.createElement(ChartPopover, {
        isPopoverOpen: isPopoverOpen,
        positioning: {
            target: popoverTarget
        },
        XValue: popoverXValue,
        legend: popoverLegend,
        color: popoverColor,
        YValue: popoverYValue
    }));
});
PolarChart.displayName = 'PolarChart';
