import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ResponsiveContainer } from 'recharts';
import styled, { useTheme } from 'styled-components';
import { spacing, Stack, Wrap } from '../../../spacing';
import { Box } from '../../box/Box';
import { IconHelp } from '../../iconhelper/IconHelper';
import { Loader } from '../../loader/Loader.component';
import { Text } from '../../text/Text.component';
import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
import { FormattedDateTime } from '../../date/FormattedDateTime';
import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
/**
 * Styled ResponsiveContainer for charts
 * Shared by Barchart and LineTimeSerieChart
 * Ensures tooltip overflow is visible and removes outline
 */
export const StyledResponsiveContainer = styled(ResponsiveContainer) `
  // Avoid tooltip over constrained text to be cut off
  & .recharts-surface {
    outline: none;
    overflow: visible;
  }
`;
const TickContainer = styled.div `
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;
/**
 * Error state component for charts
 */
export const ChartError = ({ height }) => {
    return (_jsx(Box, { height: height, style: {
            alignItems: 'center',
            justifyContent: 'center',
            display: 'flex',
        }, children: _jsx(Text, { children: "Chart data is not available" }) }));
};
/**
 * Loading state component for charts
 */
export const ChartLoading = ({ height }) => {
    return (_jsx(Box, { height: height, style: {
            alignItems: 'center',
            justifyContent: 'center',
            display: 'flex',
        }, children: _jsx(Loader, { size: "larger", children: _jsx(Text, { children: "Loading Chart Data..." }) }) }));
};
/**
 * Shared chart header component
 * Used by Barchart and can be used by other charts
 */
export const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, overlayStyle: maxWidthTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
                            marginLeft: spacing.r8,
                        }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
};
/**
 * Custom tick component for charts
 * Used by Barchart for time-based x-axis ticks
 */
export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, tickWidthOffset = 4, }) => {
    const theme = useTheme();
    const numX = typeof x === 'string' ? parseFloat(x) : x;
    const numY = typeof y === 'string' ? parseFloat(y) : y;
    const numWidth = typeof width === 'string' ? parseFloat(width) : (width !== null && width !== void 0 ? width : 0);
    const tickCount = visibleTicksCount !== null && visibleTicksCount !== void 0 ? visibleTicksCount : 1;
    const tickWidth = numWidth / tickCount - tickWidthOffset;
    const centerX = numX - tickWidth / 2;
    const duration = type.type === 'time'
        ? (type.timeRange.endDate.getTime() -
            type.timeRange.startDate.getTime()) /
            1000
        : 0;
    return (_jsx("foreignObject", { x: centerX, y: numY - 10, width: tickWidth, height: 30, style: {
            overflow: 'visible',
            pointerEvents: 'none',
        }, children: _jsx(TickContainer, { children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatXAxisDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
                    backgroundColor: theme.backgroundLevel1,
                    padding: spacing.r10,
                    borderRadius: spacing.r8,
                    border: `1px solid ${theme.border}`,
                    position: 'absolute',
                } }) }) }));
};
