import React, { useCallback } from "react";
import { useDateTime } from "../../../utils/date-time";
import { useSelector } from "../../../store/redux-separate-context";
import { selectChartData } from "../selectors";
import { legendPluginModuleString, legendResolutionTooltip } from "../utils/legend-utils";
import * as S from "./chart-legend-bottom.styled";
export const ChartTimeframe = ({ chartMetadata, showUndefined, hoveredX, viewBefore, chartData, }) => {
    const { localeDateString, localeTimeString } = useDateTime();
    const legendDate = new Date(hoveredX || viewBefore);
    return (React.createElement("div", null,
        React.createElement("span", { title: legendPluginModuleString(true, chartMetadata) }, showUndefined
            ? legendPluginModuleString(false, chartMetadata)
            : localeDateString(legendDate)),
        React.createElement(S.DateTimeSeparator, null, "|"),
        React.createElement("span", { title: legendResolutionTooltip(chartData, chartMetadata) }, showUndefined ? chartMetadata.context.toString() : localeTimeString(legendDate))));
};
export const ChartLegendBottom = ({ chartUuid, chartMetadata, colors, hoveredRow, hoveredX, legendFormatValue, onDimensionClick, selectedDimensions, showLatestOnBlur, unitsCurrent, viewBefore, legendToolbox, resizeHandler, }) => {
    const showUndefined = hoveredRow === -1 && !showLatestOnBlur;
    const chartData = useSelector(useCallback((state) => selectChartData(state, { id: chartUuid }), [chartUuid]));
    const { dimension_names: dimensionNames, dimension_ids: dimensionIds } = chartData;
    return (React.createElement(S.LegendContainer, null,
        React.createElement(S.LegendFirstRow, null,
            React.createElement(S.LegendUnit, null, unitsCurrent),
            React.createElement(ChartTimeframe, { chartMetadata: chartMetadata, showUndefined: showUndefined, hoveredX: hoveredX, viewBefore: viewBefore, chartData: chartData })),
        React.createElement(S.LegendSecondRow, null,
            React.createElement(S.LegendItems, null,
                dimensionIds.map((dimensionId, i) => {
                    const dimensionName = dimensionNames[i];
                    const color = colors[dimensionName];
                    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(S.DimensionItem, { color: color, onClick: event => {
                            onDimensionClick(dimensionName, event);
                        }, role: "button", tabIndex: 0, isDisabled: !isSelected, key: dimensionId },
                        React.createElement(S.DimensionIcon, { title: dimensionName, color: color }),
                        React.createElement(S.DimensionLabel, null, dimensionName),
                        React.createElement(S.DimensionValue, null, isSelected && legendFormatValue(value))));
                }),
                React.createElement(S.DimensionItemToolboxPlaceholder, null)),
            React.createElement(S.ToolboxContainer, null,
                legendToolbox,
                resizeHandler))));
};
//# sourceMappingURL=chart-legend-bottom.js.map