import React, { useCallback } from "react";
import { createSelector } from "reselect";
import { useSelector } from "../../../store/redux-separate-context";
import { selectChartData } from "../selectors";
import { DimensionLabel } from "./chart-legend-bottom.styled";
const emptyObject = {};
const selector = createSelector(selectChartData, ({ dimension_names: dimensionNames, keys = emptyObject }) => ({
    dimensionNames,
    keys,
}));
const LegendText = ({ id, index }) => {
    const { dimensionNames, keys } = useSelector(useCallback(state => selector(state, { id }), [id]));
    const { chart, node } = keys;
    if (chart && node && Object.keys(keys).length === 2) {
        return (React.createElement(DimensionLabel, null,
            chart[index],
            "@",
            node[index]));
    }
    const name = dimensionNames[index];
    return React.createElement(DimensionLabel, null, name);
};
export default LegendText;
//# sourceMappingURL=legendText.js.map