'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ChartPopover", {
    enumerable: true,
    get: function() {
        return ChartPopover;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactpopover = require("@fluentui/react-popover");
const _react1 = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../../utilities/index");
const _chartutilities = require("@fluentui/chart-utilities");
const _shape = require("../Legends/shape");
const _useChartPopoverStylesstyles = require("./useChartPopoverStyles.styles");
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 = (0, _useChartPopoverStylesstyles.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: (0, _reactutilities.useId)('callout'),
        ref: forwardedRef,
        className: classes.calloutContainer
    }, /*#__PURE__*/ _react.createElement(_reactpopover.Popover, {
        positioning: {
            target,
            autoSize: 'always',
            offset: 20,
            coverTarget: false
        },
        open: props.isPopoverOpen,
        inline: true
    }, /*#__PURE__*/ _react.createElement(_reactpopover.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
    }, (0, _chartutilities.formatToLocaleString)(legend, props.culture)), /*#__PURE__*/ _react.createElement("div", {
        className: classes.calloutContentY,
        style: {
            color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1,
            fontSize: _reacttheme.tokens.fontSizeHero700
        }
    }, (0, _chartutilities.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
    }, (0, _chartutilities.formatToLocaleString)(props.ratio[0], props.culture)), "/", /*#__PURE__*/ _react.createElement("span", {
        className: classes.denominator
    }, (0, _chartutilities.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,
            ...(0, _index.getAccessibleDataObject)(props.xAxisCalloutAccessibilityData, 'text', false)
        }, (0, _chartutilities.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", {
                ...(0, _index.getAccessibleDataObject)(yValue.callOutAccessibilityData, 'text', false),
                key: `callout-content-${index}`,
                style: yValueHoverSubCountsExists ? {
                    display: 'inline-block',
                    ...shouldDrawBorderBottom && {
                        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
                        paddingBottom: '10px'
                    }
                } : {
                    ...shouldDrawBorderBottom && {
                        borderBottom: `1px solid ${_reacttheme.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 = (0, _chartutilities.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.Shape, {
                svgProps: {
                    className: classes.shapeStyles
                },
                pathProps: {
                    fill: xValue.color
                },
                shape: _index.Points[xValue.index % Object.keys(_index.pointTypes).length]
            }), /*#__PURE__*/ _react.createElement("div", {
                className: (0, _react1.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'
                }
            }, (0, _chartutilities.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
                }, ' ', (0, _chartutilities.formatToLocaleString)(subcountName, culture)), /*#__PURE__*/ _react.createElement("div", {
                    className: classes.calloutContentY,
                    style: {
                        color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1
                    }
                }, (0, _chartutilities.formatToLocaleString)(subcounts[subcountName], culture)));
            }));
        }
    }
});
ChartPopover.displayName = 'ChartPopover';
