import React, { Fragment, useRef, useEffect, useCallback } from "react";
import classNames from "classnames";
import { useSelector } from "../../../store/redux-separate-context";
import { selectChartData } from "../selectors";
import { colorHex2Rgb } from "../../../utils/color-hex-2-rgb";
import { useDateTime } from "../../../utils/date-time";
import { legendResolutionTooltip, legendPluginModuleString } from "../utils/legend-utils";
import LegendText from "./legendText";
export const ChartLegendRight = ({ chartUuid, chartMetadata, chartLibrary, colors, hoveredRow, hoveredX, legendFormatValue, onDimensionClick, selectedDimensions, showLatestOnBlur, unitsCurrent, viewBefore, }) => {
    const chartData = useSelector(useCallback((state) => selectChartData(state, { id: chartUuid }), [chartUuid]));
    const { dimension_names: dimensionNames, dimension_ids: dimensionIds } = chartData;
    // todo handle also this case:
    // const netdataLast = chartData.last_entry * 1000
    // const dataUpdateEvery = chartData.view_update_every * 1000
    // showUndefined = Math.abs(netdataLast - viewBefore) > dataUpdateEvery
    // (showUndefined also when difference between last and before is bigger than granularity)
    const showUndefined = hoveredRow === -1 && !showLatestOnBlur;
    // todo support timezone
    const legendDate = new Date(hoveredX || viewBefore);
    // todo make a possibility to add chartLegened when there's not chartData
    // (if this situation is possible)
    // @ts-ignore ignoring because options.current has inconsistent structure
    const colorFillOpacity = window.NETDATA.options.current[`color_fill_opacity_${chartMetadata.chart_type}`];
    const { localeDateString, localeTimeString } = useDateTime();
    const scrollbarRef = useRef(null);
    useEffect(() => {
        if (scrollbarRef.current) {
            window.Ps.initialize(scrollbarRef.current, {
                wheelSpeed: 0.2,
                wheelPropagation: true,
                swipePropagation: true,
                minScrollbarLength: null,
                maxScrollbarLength: null,
                useBothWheelAxes: false,
                suppressScrollX: true,
                suppressScrollY: false,
                scrollXMarginOffset: 0,
                scrollYMarginOffset: 0,
                theme: "default",
            });
        }
    }, [scrollbarRef]);
    return (React.createElement("div", { className: classNames("netdata-chart-legend", `netdata-${chartLibrary}-legend`) },
        React.createElement("span", { className: "netdata-legend-title-date", title: legendPluginModuleString(true, chartMetadata) }, showUndefined
            ? legendPluginModuleString(false, chartMetadata)
            : localeDateString(legendDate)),
        React.createElement("br", null),
        React.createElement("span", { className: "netdata-legend-title-time", title: legendResolutionTooltip(chartData, chartMetadata) }, showUndefined
            ? chartMetadata.context.toString()
            : localeTimeString(legendDate)),
        React.createElement("br", null),
        React.createElement("span", { className: "netdata-legend-title-units" }, unitsCurrent),
        React.createElement("br", null),
        React.createElement("div", { className: "netdata-legend-series", ref: scrollbarRef },
            React.createElement("div", { className: "netdata-legend-series-content" }, dimensionIds.map((dimensionId, i) => {
                const dimensionName = dimensionNames[i];
                // todo dimension could be a separate component
                const color = colors[dimensionName];
                const rgb = colorHex2Rgb(color);
                const isSelected = selectedDimensions.length === 0
                    || selectedDimensions.includes(dimensionName);
                let value;
                if (showUndefined) {
                    value = null;
                }
                else if (hoveredRow !== -1) {
                    const hoveredValueArray = chartData.result.data[hoveredRow];
                    // [timestamp, valueDim1, valueDim2, ...]
                    value = hoveredValueArray ? hoveredValueArray[i + 1] : null;
                }
                else {
                    value = chartData.view_latest_values[i];
                }
                return (React.createElement(Fragment, { key: dimensionId },
                    i !== 0 && React.createElement("br", null),
                    React.createElement("span", { title: dimensionName, className: classNames("netdata-legend-name", isSelected ? "selected" : "not-selected"), onClick: (event) => {
                            onDimensionClick(dimensionName, event);
                        }, role: "button", style: { color }, tabIndex: 0 },
                        React.createElement("table", { className: `netdata-legend-name-table-${chartMetadata.chart_type}`, style: {
                                backgroundColor: `rgba(${rgb.r},${rgb.g},${rgb.b},${colorFillOpacity})`,
                            } },
                            React.createElement("tbody", null,
                                React.createElement("tr", { className: "netdata-legend-name-tr" },
                                    React.createElement("td", { className: "netdata-legend-name-td" })))),
                        " ",
                        React.createElement(LegendText, { id: chartUuid, index: i })),
                    React.createElement("span", { title: dimensionName, className: classNames("netdata-legend-value", !isSelected && "hidden"), onClick: (event) => {
                            onDimensionClick(dimensionName, event);
                        }, role: "button", style: { color }, tabIndex: 0 }, legendFormatValue(value))));
            })))));
};
//# sourceMappingURL=chart-legend-right.js.map