import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css, useTheme } from 'styled-components';
import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
import { zIndex } from '../../../style/theme';
import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
const TooltipContainer = styled.div `
  ${(props) => {
    const theme = useTheme();
    return css `
      border: 1px solid ${theme.border};
      width: 24rem;
      z-index: ${zIndex.tooltip};
      color: ${theme.textSecondary};
      background-color: ${theme.backgroundLevel1};
      border-radius: 4px;
      padding: ${spacing.r8};
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    `;
}}
`;
export const GlobalHealthBarTooltip = (props) => {
    const { tooltipData, tooltipProps, chartContainerRef, isKeyboardActive = false, startTimestamp = 0, endTimestamp = 0, } = props;
    const { coordinate } = tooltipProps;
    if (!tooltipData)
        return null;
    const { description, startsAt, endsAt, severity } = tooltipData;
    const tooltipContent = (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Severity" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: severity })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Start" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(startsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "End" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(endsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", style: { paddingRight: spacing.r32 }, children: "Description" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", style: { whiteSpace: 'wrap', textAlign: 'justify' }, children: description })] })] }));
    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: !!tooltipData, customPosition: (chartRect, coordinate) => {
            if (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
                // Calculate the chart's usable width (excluding margins)
                const chartUsableWidth = chartRect.width -
                    CHART_CONFIG.MARGINS.left -
                    CHART_CONFIG.MARGINS.right;
                // Use the same positioning logic as alert bars
                const alertCenterX = getTooltipPosition(tooltipData, startTimestamp, endTimestamp, chartUsableWidth);
                return {
                    x: chartRect.left + alertCenterX,
                    y: chartRect.top + CHART_CONFIG.BAR_SIZE,
                };
            }
            else {
                // For mouse navigation, use the provided coordinate
                return {
                    x: chartRect.left + ((coordinate === null || coordinate === void 0 ? void 0 : coordinate.x) || 0),
                    y: chartRect.top + ((coordinate === null || coordinate === void 0 ? void 0 : coordinate.y) || 0),
                };
            }
        }, containerComponent: TooltipContainer, offset: ({ placement }) => {
            // Use larger offset when tooltip is on top
            // to avoid tooltip over bar
            return placement.includes('top') ? 20 : 30;
        }, children: tooltipContent }));
};
