import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useRef, useState } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, YAxis, } from 'recharts';
import styled, { useTheme } from 'styled-components';
import { GlobalHealthBarTooltip } from './components/GlobalHealthBarTooltip';
import { HealthBarXAxis } from './components/HealthBarXAxis';
import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './healthBarUtils';
import { useHealthBarData } from './useHealthBarData';
const ChartInteractiveContainer = styled.div `
  position: relative;
  outline: none;
  .recharts-surface {
    outline: none;
  }
`;
export function GlobalHealthBar({ id, alerts, start, end }) {
    const [tooltipData, setTooltipData] = useState(null);
    const [focusedAlertIndex, setFocusedAlertIndex] = useState(-1);
    const [keyboardActive, setKeyboardActive] = useState(false);
    const [activeBarKey, setActiveBarKey] = useState(null);
    const chartContainerRef = useRef(null);
    const theme = useTheme();
    const startTimestamp = new Date(start).getTime();
    const endTimestamp = new Date(end).getTime();
    const { chartData, alertsMap, alertKeys } = useHealthBarData(alerts, startTimestamp, endTimestamp, id);
    const handlePointerEnter = useCallback((key) => {
        setTooltipData(alertsMap[key]);
        setActiveBarKey(key);
    }, [alertsMap]);
    const handlePointerLeave = useCallback(() => {
        if (!keyboardActive) {
            setTooltipData(null);
            setActiveBarKey(null);
        }
    }, [keyboardActive]);
    const { warningKeys, criticalKeys, unavailableKeys } = alertKeys;
    // Get all alert keys in order for keyboard navigation
    const allAlertKeys = useMemo(() => {
        return Object.values(alertsMap).sort((a, b) => {
            return new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime();
        });
    }, [alertsMap]);
    // Handle keyboard navigation
    const handleKeyDown = useCallback((event) => {
        const action = getNavigationAction(event.key);
        if (!action || allAlertKeys.length === 0)
            return;
        event.preventDefault();
        const update = getNavigationStateUpdate(action, focusedAlertIndex, allAlertKeys);
        setFocusedAlertIndex(update.newIndex);
        setTooltipData(update.selectedAlert);
        setKeyboardActive(update.shouldActivateKeyboard);
        // Set active bar key for keyboard navigation
        if (update.selectedAlert) {
            setActiveBarKey(update.selectedAlert.key);
        }
    }, [allAlertKeys, focusedAlertIndex]);
    // Handle focus events
    const handleFocus = useCallback(() => {
        if (allAlertKeys.length > 0 && focusedAlertIndex === -1) {
            setFocusedAlertIndex(0);
            setTooltipData(allAlertKeys[0]);
            setKeyboardActive(true);
            // Set active bar key for initial focus
            setActiveBarKey(allAlertKeys[0].key);
        }
    }, [allAlertKeys, focusedAlertIndex]);
    const handleBlur = useCallback(() => {
        setKeyboardActive(false);
        setFocusedAlertIndex(-1);
        setTooltipData(null);
        setActiveBarKey(null);
    }, []);
    // Handle mouse enter to disable keyboard mode
    const handleMouseEnter = useCallback(() => {
        setKeyboardActive(false);
    }, []);
    const allAlertBars = useMemo(() => {
        const configs = [
            { keys: unavailableKeys, fill: theme.textSecondary },
            { keys: warningKeys, fill: theme.statusWarning },
            { keys: criticalKeys, fill: theme.statusCritical },
        ];
        return configs.flatMap(({ keys, fill }) => keys.map((key) => ({ key, fill })));
    }, [unavailableKeys, warningKeys, criticalKeys, theme]);
    return (_jsx(ChartInteractiveContainer, { ref: chartContainerRef, tabIndex: 0, role: "application", "aria-label": `Health bar chart with ${allAlertKeys.length} alerts. Use arrow keys to navigate, Escape to close tooltip.`, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, children: _jsx(ResponsiveContainer, { width: '100%', height: CHART_CONFIG.CHART_HEIGHT, children: _jsxs(BarChart, { data: chartData, layout: "vertical", barSize: CHART_CONFIG.BAR_SIZE, accessibilityLayer: true, margin: CHART_CONFIG.MARGINS, children: [_jsx(HealthBarXAxis, { startTimestamp: startTimestamp, endTimestamp: endTimestamp }), _jsx(Tooltip, { allowEscapeViewBox: { x: true, y: true }, isAnimationActive: false, shared: false, wrapperStyle: {
                            width: '20rem',
                            position: 'fixed',
                        }, content: (props) => {
                            return (_jsx(GlobalHealthBarTooltip, { tooltipData: tooltipData, tooltipProps: props, chartContainerRef: chartContainerRef, isKeyboardActive: keyboardActive, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
                        } }), _jsx(YAxis, { yAxisId: 'background', type: "category", hide: true }), allAlertBars.map(({ key }) => (_jsx(YAxis, { yAxisId: key, type: "category", hide: true }, `yAxis${key}`))), _jsx(Bar, { dataKey: "range", fill: theme.statusHealthy, radius: CHART_CONFIG.RADIUS_SIZE, yAxisId: "background", isAnimationActive: false }), allAlertBars.map(({ key, fill }) => {
                        const isActive = key === activeBarKey;
                        // Skip active bar here - it will be rendered last
                        if (isActive)
                            return null;
                        return (_jsx(Bar, { dataKey: key, yAxisId: key, fill: fill, onPointerEnter: () => handlePointerEnter(key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false }, key));
                    }), activeBarKey &&
                        (() => {
                            const activeBar = allAlertBars.find((bar) => bar.key === activeBarKey);
                            if (!activeBar)
                                return null;
                            return (_jsx(Bar, { dataKey: activeBar.key, yAxisId: activeBar.key, fill: activeBar.fill, stroke: theme.selectedActive, onPointerEnter: () => handlePointerEnter(activeBar.key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false }, `${activeBar.key}-active`));
                        })()] }) }) }));
}
