import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef } from 'react';
import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
import styled, { useTheme } from 'styled-components';
import { Stack } from '../../../spacing';
import { fontSize } from '../../../style/theme';
import { IconHelp } from '../../iconhelper/IconHelper';
import { Loader } from '../../loader/Loader.component';
import { ChartTitleText } from '../../text/Text.component';
import { StyledResponsiveContainer } from '../common/SharedComponents';
import { formatTickValue, getTicks, maxWidthTooltip } from '../common/chartUtils';
import { formatXAxisLabel } from './LineTimeSerieChart.utils';
import { LineTimeSerieChartTooltip } from './LineTimeSerieChartTooltip';
import { useChartHover } from './useChartHover';
import { useChartData } from './useChartData';
const LineTemporalChartWrapper = styled.div `
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
`;
/**
 * LineTimeSerieChart - A time series line chart component
 *
 * @param series - The data series to display (can be symmetrical with above/below)
 * @param title - The title of the chart
 * @param height - The height of the chart in pixels
 * @param startingTimeStamp - Starting timestamp in seconds
 * @param interval - Interval between data points in seconds
 * @param duration - Total duration of the chart in seconds
 * @param unitRange - Configuration for automatic unit scaling
 * @param syncId - ID to synchronize multiple charts
 * @param isLoading - Whether to show loading state
 * @param yAxisType - Type of Y-axis: 'default', 'percentage', or 'symmetrical'
 * @param yAxisTitle - Label for the Y-axis
 * @param helpText - Help text shown as tooltip
 * @param renderTooltip - Custom tooltip renderer
 */
export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, }) {
    const theme = useTheme();
    const chartRef = useRef(null);
    // Hover state management for tooltip display
    const { handleMouseEnter, handleMouseLeave, chartId } = useChartHover();
    // Process chart data
    const { rechartsData, topDomain, topValue, unitLabel, xAxisTicks, linesToRender, belowSeriesLabels, } = useChartData({
        series,
        startingTimeStamp,
        duration,
        interval,
        yAxisType,
        unitRange,
    });
    // Format X-axis labels based on duration
    const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, duration), [duration]);
    // Format Y-axis tick values
    const tickFormatter = useCallback((value) => formatTickValue(value, topValue), [topValue]);
    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(Stack, { gap: "r4", children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(IconHelp, { tooltipMessage: helpText, overlayStyle: maxWidthTooltip })), isLoading && _jsx(Loader, {})] }), _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { ref: chartRef, data: rechartsData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, accessibilityLayer: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
                                fill: theme.textSecondary,
                                fontSize: fontSize.smaller,
                            }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", label: {
                                value: yAxisTitle,
                                angle: 90,
                                dx: 20,
                                style: {
                                    fill: theme.textSecondary,
                                    fontSize: fontSize.smaller,
                                },
                            }, domain: yAxisType === 'symmetrical'
                                ? [-topDomain, topDomain]
                                : [0, topDomain], allowDataOverflow: true, axisLine: { stroke: theme.border }, tick: {
                                fill: theme.textSecondary,
                                fontSize: fontSize.smaller,
                            }, tickFormatter: tickFormatter, ticks: getTicks(topValue, yAxisType === 'symmetrical'), interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', belowSeriesLabels: belowSeriesLabels, tooltipProps: props, chartContainerRef: chartRef, chartId: chartId })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), linesToRender.map((line) => (_jsx(Line, { type: "monotone", dataKey: line.dataKey, stroke: line.stroke, dot: false, isAnimationActive: false, strokeDasharray: line.strokeDasharray }, `${title}-${line.key}`)))] }) })] }));
}
