'use client';
import * as React from 'react';
import { Popover, PopoverSurface } from '@fluentui/react-popover';
import { mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { useId } from '@fluentui/react-utilities';
import { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';
import { formatToLocaleString } from '@fluentui/chart-utilities';
import { Shape } from '../Legends/shape';
import { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';
/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart
combining the logic for Callout and ChartHoverCard in v8 charts. */ export const ChartPopover = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    var _props_customCallout;
    const virtualElement = {
        getBoundingClientRect: ()=>({
                top: props.clickPosition.y,
                left: props.clickPosition.x,
                right: props.clickPosition.x,
                bottom: props.clickPosition.y,
                x: props.clickPosition.x,
                y: props.clickPosition.y,
                width: 0,
                height: 0
            })
    };
    const target = typeof props.positioning === 'object' && 'target' in props.positioning ? props.positioning.target !== null ? props.positioning.target : virtualElement : virtualElement;
    props = {
        ...props,
        ...(_props_customCallout = props.customCallout) === null || _props_customCallout === void 0 ? void 0 : _props_customCallout.customCalloutProps
    };
    const classes = usePopoverStyles_unstable(props);
    const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;
    const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;
    return /*#__PURE__*/ React.createElement("div", {
        id: useId('callout'),
        ref: forwardedRef,
        className: classes.calloutContainer
    }, /*#__PURE__*/ React.createElement(Popover, {
        positioning: {
            target,
            autoSize: 'always',
            offset: 20,
            coverTarget: false
        },
        open: props.isPopoverOpen,
        inline: true
    }, /*#__PURE__*/ React.createElement(PopoverSurface, null, props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout, (!props.customCallout || !props.customCallout.customizedCallout) && props.isCalloutForStack && _multiValueCallout(), (!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutContentRoot
    }, /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutDateTimeContainer
    }, /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutContentX
    }, props.XValue, " ")), /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutInfoContainer,
        style: {
            ...props.ratio && {
                display: 'flex',
                alignItems: 'flex-end'
            },
            borderInlineStart: `4px solid ${props.color}`,
            marginTop: '11px'
        }
    }, /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutBlockContainer
    }, /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutlegendText
    }, formatToLocaleString(legend, props.culture)), /*#__PURE__*/ React.createElement("div", {
        className: classes.calloutContentY,
        style: {
            color: props.color ? props.color : tokens.colorNeutralForeground1,
            fontSize: tokens.fontSizeHero700
        }
    }, formatToLocaleString(YValue, props.culture))), !!props.ratio && /*#__PURE__*/ React.createElement("div", {
        className: classes.ratio
    }, /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
        className: classes.numerator
    }, formatToLocaleString(props.ratio[0], props.culture)), "/", /*#__PURE__*/ React.createElement("span", {
        className: classes.denominator
    }, formatToLocaleString(props.ratio[1], props.culture))))), !!props.descriptionMessage && /*#__PURE__*/ React.createElement("div", {
        className: classes.descriptionMessage
    }, props.descriptionMessage)))));
    function _multiValueCallout() {
        var _yValueHoverSubCountsExists1;
        const yValueHoverSubCountsExists = (_yValueHoverSubCountsExists1 = _yValueHoverSubCountsExists(props.YValueHover)) !== null && _yValueHoverSubCountsExists1 !== void 0 ? _yValueHoverSubCountsExists1 : false;
        return /*#__PURE__*/ React.createElement("div", {
            className: classes.calloutContentRoot
        }, /*#__PURE__*/ React.createElement("div", {
            className: classes.calloutDateTimeContainer,
            style: yValueHoverSubCountsExists ? {
                marginBottom: '11px'
            } : {}
        }, /*#__PURE__*/ React.createElement("div", {
            className: classes.calloutContentX,
            ...getAccessibleDataObject(props.xAxisCalloutAccessibilityData, 'text', false)
        }, formatToLocaleString(props.hoverXValue, props.culture))), /*#__PURE__*/ React.createElement("div", {
            style: yValueHoverSubCountsExists ? {
                display: 'flex'
            } : {}
        }, props.YValueHover && props.YValueHover.map((yValue, index, yValues)=>{
            const isLast = index + 1 === yValues.length;
            var _yValue_shouldDrawBorderBottom;
            const shouldDrawBorderBottom = isLast ? false : (_yValue_shouldDrawBorderBottom = yValue.shouldDrawBorderBottom) !== null && _yValue_shouldDrawBorderBottom !== void 0 ? _yValue_shouldDrawBorderBottom : false;
            return /*#__PURE__*/ React.createElement("div", {
                ...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false),
                key: `callout-content-${index}`,
                style: yValueHoverSubCountsExists ? {
                    display: 'inline-block',
                    ...shouldDrawBorderBottom && {
                        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
                        paddingBottom: '10px'
                    }
                } : {
                    ...shouldDrawBorderBottom && {
                        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
                        paddingBottom: '10px'
                    }
                }
            }, _getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast));
        }), !!props.descriptionMessage && /*#__PURE__*/ React.createElement("div", {
            className: classes.descriptionMessage
        }, props.descriptionMessage)));
    }
    function _yValueHoverSubCountsExists(yValueHover) {
        return yValueHover && yValueHover.some((yValue)=>yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string');
    }
    function _getCalloutContent(xValue, index, yValueHoverSubCountsExists, isLast) {
        const marginStyle = isLast ? {} : {
            marginRight: '16px'
        };
        const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
        const { culture } = props;
        const yValue = formatToLocaleString(xValue.y, culture);
        if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
            var _xValue_y;
            return /*#__PURE__*/ React.createElement("div", {
                style: yValueHoverSubCountsExists ? marginStyle : {}
            }, yValueHoverSubCountsExists && /*#__PURE__*/ React.createElement("div", {
                className: "ms-fontWeight-semibold",
                style: {
                    fontSize: '12pt'
                }
            }, xValue.legend, " (", yValue, ")"), /*#__PURE__*/ React.createElement("div", {
                id: `${index}_${xValue.y}`,
                className: classes.calloutBlockContainer,
                style: {
                    ...!toDrawShape ? {
                        borderInlineStart: `4px solid ${xValue.color}`
                    } : {}
                }
            }, toDrawShape && /*#__PURE__*/ React.createElement(Shape, {
                svgProps: {
                    className: classes.shapeStyles
                },
                pathProps: {
                    fill: xValue.color
                },
                shape: Points[xValue.index % Object.keys(pointTypes).length]
            }), /*#__PURE__*/ React.createElement("div", {
                className: mergeClasses(classes.calloutBlockContainer, toDrawShape ? classes.calloutBlockContainertoDrawShapetrue : classes.calloutBlockContainertoDrawShapefalse),
                style: {
                    marginTop: xValue ? '13px' : 'unset'
                }
            }, /*#__PURE__*/ React.createElement("div", {
                className: classes.calloutlegendText
            }, " ", xValue.legend), /*#__PURE__*/ React.createElement("div", {
                className: classes.calloutContentY,
                style: {
                    direction: 'ltr',
                    unicodeBidi: 'isolate'
                }
            }, formatToLocaleString(xValue.yAxisCalloutData ? xValue.yAxisCalloutData : (_xValue_y = xValue.y) !== null && _xValue_y !== void 0 ? _xValue_y : xValue.data, culture)))));
        } else {
            const subcounts = xValue.yAxisCalloutData;
            return /*#__PURE__*/ React.createElement("div", {
                style: marginStyle
            }, /*#__PURE__*/ React.createElement("div", {
                className: "ms-fontWeight-semibold",
                style: {
                    fontSize: '12pt'
                }
            }, xValue.legend, " (", yValue, ")"), Object.keys(subcounts).map((subcountName)=>{
                return /*#__PURE__*/ React.createElement("div", {
                    key: subcountName,
                    className: classes.calloutBlockContainer
                }, /*#__PURE__*/ React.createElement("div", {
                    className: classes.calloutlegendText
                }, ' ', formatToLocaleString(subcountName, culture)), /*#__PURE__*/ React.createElement("div", {
                    className: classes.calloutContentY,
                    style: {
                        color: props.color ? props.color : tokens.colorNeutralForeground1
                    }
                }, formatToLocaleString(subcounts[subcountName], culture)));
            }));
        }
    }
});
ChartPopover.displayName = 'ChartPopover';
