import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { LegendShape } from '../chartlegend/ChartLegend';
import { ChartTooltipPortal, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
import { getCurrentPoint } from './utils';
export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }) => {
    const { active, coordinate } = tooltipProps;
    if (!active) {
        return null;
    }
    const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
    const duration = type.type === 'time'
        ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
        : 0;
    const tooltipContent = tooltip ? (tooltip(currentPoint)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(TooltipHeader, { duration: duration, value: currentPoint.category })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
                    const legendIcon = colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }));
                    const formattedValue = Number.isInteger(value.value)
                        ? `${value.value}`
                        : value.value.toFixed(2);
                    const valueWithUnit = unitLabel
                        ? `${formattedValue} ${unitLabel}`
                        : formattedValue;
                    return (_jsx(ChartTooltipItem, { label: value.label, value: valueWithUnit, isHovered: value.isHovered, legendIcon: legendIcon }, value.label));
                }) })] }));
    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active, children: tooltipContent }));
};
