import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { createPortal } from 'react-dom';
import { AnimatePresence, motion } from 'motion/react';
import { cn } from '../../../../utils/cn.js';
import { chartTooltipTheme } from './ChartTooltip.theme.js';
import { useIsClient } from '../../../../hooks/useIsClient.js';

// Helper function to check if content is MultiSeriesData
const isMultiSeriesData = (content) => {
    return typeof content === 'object' && content !== null && 'category' in content && 'series' in content;
};
// Component to render multi-series tooltip content
const MultiSeriesContent = ({ data, theme, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName }) => {
    return (jsxs("div", { className: cn(theme.multiSeriesContainerStyle, containerClassName), children: [jsx("div", { className: cn(theme.categoryStyle, categoryClassName), children: data.category }), jsxs("div", { className: cn(theme.seriesContainerStyle, seriesContainerClassName), children: [data.series.map((item, index) => (jsxs("div", { className: cn(theme.seriesRowStyle, seriesRowClassName), children: [jsxs("div", { className: "flex items-center gap-1.5", children: [item.color && (jsx("div", { className: cn(theme.dotStyle, dotClassName), style: { backgroundColor: item.color } })), jsx("span", { className: cn(theme.labelStyle, labelClassName), children: item.label || item.key })] }), jsx("span", { className: cn(theme.valueStyle, valueClassName), children: item.value })] }, index))), data.total !== undefined && (jsxs(Fragment, { children: [jsx("div", { className: "my-1 border-t border-[var(--color-border)]" }), jsxs("div", { className: cn(theme.seriesRowStyle, seriesRowClassName), children: [jsx("div", { className: "flex items-center gap-1.5", children: jsx("span", { className: cn(theme.labelStyle, labelClassName, "font-medium"), children: "Total" }) }), jsx("span", { className: cn(theme.valueStyle, valueClassName), children: data.total })] })] }))] })] }));
};
function ChartTooltip({ content, className, active = false, position = { x: 0, y: 0 }, children, chartType, containerClassName, categoryClassName, seriesContainerClassName, seriesRowClassName, dotClassName, labelClassName, valueClassName, tooltipRef, theme: themeOverrides, cursor, wrapperStyle, labelStyle, contentStyle, itemStyle, payload, label, onAnimationStart, onAnimationEnd, onDragStart, onDragEnd, onDrag, ...props }) {
    const theme = { ...chartTooltipTheme, ...(themeOverrides || {}) };
    const isClient = useIsClient();
    const tooltipContent = (jsx(AnimatePresence, { mode: "wait", children: active && content && (jsx(motion.div, { ref: tooltipRef, initial: {
                opacity: 0,
                scale: 0.95,
            }, animate: {
                opacity: 1,
                scale: 1,
                transition: {
                    type: "spring",
                    stiffness: 400,
                    damping: 30,
                    opacity: { duration: 0.15 },
                    scale: { duration: 0.15 }
                },
            }, exit: {
                opacity: 0,
                scale: 0.95,
                transition: {
                    type: "spring",
                    stiffness: 300,
                    damping: 25,
                    duration: 0.15,
                },
            }, className: cn(theme.baseStyle, className), style: {
                left: position.x + 16,
                top: position.y + 16,
            }, ...props, children: jsx("div", { className: cn(theme.contentStyle, isMultiSeriesData(content) ? theme.multiSeriesContainerStyle : "text-center"), children: isMultiSeriesData(content) ? (jsx(MultiSeriesContent, { data: content, theme: theme, containerClassName: containerClassName, categoryClassName: categoryClassName, seriesContainerClassName: seriesContainerClassName, seriesRowClassName: seriesRowClassName, dotClassName: dotClassName, labelClassName: labelClassName, valueClassName: valueClassName })) : (content) }) })) }));
    return (jsxs(Fragment, { children: [children, isClient
                ? createPortal(tooltipContent, document.body)
                : null] }));
}

export { ChartTooltip };
