/* eslint-disable comma-dangle */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable object-curly-newline */
/* eslint-disable react/prop-types */
// @ts-nocheck
import React, { useRef, useContext, useLayoutEffect, useState, memo, useMemo } from "react";
import { throttle } from "throttle-debounce";
import { ChartContainer } from "../../../chart-container";
import { ThemeContext } from "styled-components";
import { Flex, getColor } from "@netdata/netdata-ui";
import ChartOverview from "./chartOverview";
const Chart = ({ groupLabel, postGroupLabel, id, attributes, relatedIndex }) => {
    const theme = useContext(ThemeContext);
    const chartContainerRef = useRef();
    const [displayedIndex, setDisplayedIndex] = useState();
    const setDisplayedIndexThrottled = useMemo(() => throttle(400, setDisplayedIndex), []);
    const [, repaint] = useState();
    useLayoutEffect(() => {
        repaint(true);
    }, []);
    const { chartMetadata, attributes: relatedChartAttributes } = attributes.relatedCharts[relatedIndex];
    const chartAttributes = useMemo(() => ({
        id: chartMetadata.id,
        width: "100%",
        height: "60px",
        chartLibrary: "sparkline",
        sparklineLineWidth: "2px",
        sparklineLineColor: getColor("border")({ theme }),
        sparklineFillColor: getColor("disabled")({ theme }),
        sparklineSpotRadius: 0,
        sparklineDisableTooltips: true,
        sparklineOnHover: (event) => { var _a; return setDisplayedIndexThrottled((_a = event) === null || _a === void 0 ? void 0 : _a.x); },
        httpMethod: "POST",
        host: attributes.host,
        nodeIDs: attributes.nodeIDs,
        dimensions: relatedChartAttributes.dimensions,
        aggrMethod: relatedChartAttributes.aggrMethod,
        labels: {
            k8s_cluster_id: [chartMetadata.chartLabels.k8s_cluster_id[0]],
            [attributes.groupBy]: [groupLabel],
            ...(postGroupLabel && { [attributes.postGroupBy]: [postGroupLabel] }),
        },
    }), [chartMetadata, attributes]);
    return (React.createElement(Flex, { gap: 2, column: true, "data-testid": "k8sPopoverChart" },
        React.createElement("div", { ref: chartContainerRef, style: { height: "60px", width: "100%" }, "data-testid": "k8sPopoverChart-container" }, chartContainerRef.current && (React.createElement(ChartContainer, { chartUuid: id, attributes: chartAttributes, chartMetadata: chartMetadata, portalNode: chartContainerRef.current }))),
        React.createElement(ChartOverview, { id: id, aggrMethod: chartAttributes.aggrMethod, chartMetadata: chartMetadata, displayedIndex: displayedIndex })));
};
export default memo(Chart);
//# sourceMappingURL=chart.js.map