"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Legend = void 0;
const classnames_1 = __importDefault(require("classnames"));
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const redux_1 = require("redux");
const custom_legend_1 = require("./custom_legend");
const legend_list_1 = require("./legend_list");
const legend_table_1 = require("./legend_table");
const position_style_1 = require("./position_style");
const style_utils_1 = require("./style_utils");
const use_action_focus_management_1 = require("./use_action_focus_management");
const legend_1 = require("../../common/legend");
const specs_1 = require("../../specs");
const colors_1 = require("../../state/actions/colors");
const legend_2 = require("../../state/actions/legend");
const get_chart_theme_1 = require("../../state/selectors/get_chart_theme");
const get_internal_chart_state_1 = require("../../state/selectors/get_internal_chart_state");
const get_internal_is_intialized_1 = require("../../state/selectors/get_internal_is_intialized");
const get_internal_main_projection_area_1 = require("../../state/selectors/get_internal_main_projection_area");
const get_legend_config_selector_1 = require("../../state/selectors/get_legend_config_selector");
const get_legend_items_values_1 = require("../../state/selectors/get_legend_items_values");
const get_legend_size_1 = require("../../state/selectors/get_legend_size");
const get_longest_legend_formatted_value_1 = require("../../state/selectors/get_longest_legend_formatted_value");
const get_settings_spec_1 = require("../../state/selectors/get_settings_spec");
const is_brushing_1 = require("../../state/selectors/is_brushing");
const common_1 = require("../../utils/common");
const light_theme_1 = require("../../utils/themes/light_theme");
function LegendComponent(props) {
    const { items, size, debug, isBrushing, chartTheme: { chartMargins, legend }, chartDimensions, containerDimensions, config, maxFormattedValueWidth, } = props;
    const { onLegendItemOut, onLegendItemOver, legendLayout, legendPosition } = config;
    const { onItemOutAction, onItemOverAction } = props;
    const onLegendItemMouseOver = (0, react_1.useCallback)((seriesIdentifiers, path) => {
        if (onLegendItemOver) {
            onLegendItemOver(seriesIdentifiers);
        }
        onItemOverAction(path);
    }, [onItemOverAction, onLegendItemOver]);
    const onLegendItemMouseOut = (0, react_1.useCallback)(() => {
        if (onLegendItemOut) {
            onLegendItemOut();
        }
        onItemOutAction();
    }, [onLegendItemOut, onItemOutAction]);
    if (items.every(({ isItemHidden }) => isItemHidden)) {
        return null;
    }
    const positionConfig = (0, position_style_1.getLegendPositionConfig)(config.legendPosition);
    const containerStyle = (0, style_utils_1.getLegendStyle)(positionConfig, size, legend.margin);
    const listStyle = (0, style_utils_1.getLegendListStyle)(positionConfig, chartMargins, legend, items.length);
    const isMostlyRTL = (0, common_1.hasMostlyRTLItems)(items.map(({ label }) => label));
    const legendClasses = (0, classnames_1.default)('echLegend', {
        'echLegend--debug': debug,
        'echLegend--inert': isBrushing,
        'echLegend--horizontal': positionConfig.direction === common_1.LayoutDirection.Horizontal,
        'echLegend--vertical': positionConfig.direction === common_1.LayoutDirection.Vertical,
        'echLegend--left': positionConfig.hAlign === common_1.HorizontalAlignment.Left,
        'echLegend--right': positionConfig.hAlign === common_1.HorizontalAlignment.Right,
        'echLegend--top': positionConfig.vAlign === common_1.VerticalAlignment.Top,
        'echLegend--bottom': positionConfig.vAlign === common_1.VerticalAlignment.Bottom,
    });
    const itemProps = {
        positionConfig,
        isMostlyRTL,
        totalItems: items.length,
        hiddenItems: items.filter(({ isSeriesHidden }) => isSeriesHidden).length,
        extraValues: props.extraValues,
        legendValues: config.legendValues,
        onLegendItemMouseOver,
        onLegendItemMouseOut,
        onClick: config.onLegendItemClick,
        clearTemporaryColorsAction: props.clearTemporaryColors,
        setPersistedColorAction: props.setPersistedColor,
        setTemporaryColorAction: props.setTemporaryColor,
        toggleDeselectSeriesAction: props.onToggleDeselectSeriesAction,
        colorPicker: config.legendColorPicker,
        action: config.legendAction,
        legendActionOnHover: config.legendActionOnHover ?? specs_1.DEFAULT_LEGEND_CONFIG.legendActionOnHover,
        labelOptions: legend.labelOptions,
        flatLegend: config.flatLegend ?? specs_1.DEFAULT_LEGEND_CONFIG.flatLegend,
        legendTitle: config.legendTitle,
    };
    const positionStyle = (0, position_style_1.legendPositionStyle)(config, size, chartDimensions, containerDimensions);
    const isTableView = (0, legend_1.shouldDisplayTable)(itemProps.legendValues, legendPosition, legendLayout);
    const isGridListView = (0, legend_1.shouldDisplayGridList)(isTableView, legendPosition, legendLayout);
    const actionFocusEnabled = Boolean(config.legendAction);
    return (react_1.default.createElement(use_action_focus_management_1.ActionFocusProvider, { enabled: actionFocusEnabled },
        react_1.default.createElement("div", { className: legendClasses, style: positionStyle, dir: isMostlyRTL ? 'rtl' : 'ltr' }, config.customLegend ? (react_1.default.createElement("div", { style: containerStyle },
            react_1.default.createElement(custom_legend_1.CustomLegend, { component: config.customLegend, items: items.map(({ seriesIdentifiers, childId, path, ...customProps }) => ({
                    ...customProps,
                    seriesIdentifiers,
                    path,
                    extraValue: itemProps.extraValues.get(seriesIdentifiers[0]?.key ?? '')?.get(childId ?? ''),
                    onItemOutAction,
                    onItemOverActon: () => onItemOverAction(path),
                    onItemClickAction: (negate) => itemProps.toggleDeselectSeriesAction({ legendItemIds: seriesIdentifiers, metaKey: negate }),
                })) }))) : isTableView ? (react_1.default.createElement("div", { style: containerStyle, className: "echLegendTable__container" },
            react_1.default.createElement(legend_table_1.LegendTable, { items: items, ...itemProps, seriesWidth: size.seriesWidth }))) : isGridListView ? (react_1.default.createElement("div", { style: containerStyle, className: "echLegendGridListContainer" },
            react_1.default.createElement("ul", { style: listStyle, className: "echLegendGridList" }, items.map((item, index) => (react_1.default.createElement(legend_list_1.LegendList, { key: `${index}`, item: item, ...itemProps })))))) : (react_1.default.createElement("div", { style: containerStyle, className: "echLegendListContainer" },
            react_1.default.createElement("ul", { style: listStyle, className: "echLegendList" }, items.map((item, index) => (react_1.default.createElement(legend_list_1.LegendList, { key: `${index}`, item: item, ...itemProps, isListLayout: true, maxFormattedValueWidth: maxFormattedValueWidth })))))))));
}
const mapDispatchToProps = (dispatch) => (0, redux_1.bindActionCreators)({
    onToggleDeselectSeriesAction: legend_2.onToggleDeselectSeriesAction,
    onItemOutAction: legend_2.onLegendItemOutAction,
    onItemOverAction: legend_2.onLegendItemOverAction,
    clearTemporaryColors: colors_1.clearTemporaryColors,
    setTemporaryColor: colors_1.setTemporaryColor,
    setPersistedColor: colors_1.setPersistedColor,
}, dispatch);
const EMPTY_DEFAULT_STATE = {
    chartDimensions: { width: 0, height: 0, left: 0, top: 0 },
    containerDimensions: { width: 0, height: 0, left: 0, top: 0 },
    items: [],
    extraValues: new Map(),
    debug: false,
    isBrushing: false,
    chartTheme: light_theme_1.LIGHT_THEME,
    size: { width: 0, height: 0 },
    config: specs_1.DEFAULT_LEGEND_CONFIG,
};
const mapStateToProps = (state) => {
    const internalChartState = (0, get_internal_chart_state_1.getInternalChartStateSelector)(state);
    if (internalChartState === null || (0, get_internal_is_intialized_1.getInternalIsInitializedSelector)(state) !== get_internal_is_intialized_1.InitStatus.Initialized) {
        return EMPTY_DEFAULT_STATE;
    }
    const config = (0, get_legend_config_selector_1.getLegendConfigSelector)(state);
    if (!config.showLegend) {
        return EMPTY_DEFAULT_STATE;
    }
    const { debug } = (0, get_settings_spec_1.getSettingsSpecSelector)(state);
    return {
        debug,
        isBrushing: (0, is_brushing_1.isBrushingSelector)(state),
        chartDimensions: (0, get_internal_main_projection_area_1.getInternalMainProjectionAreaSelector)(state),
        containerDimensions: internalChartState.getProjectionContainerArea(state),
        chartTheme: (0, get_chart_theme_1.getChartThemeSelector)(state),
        size: (0, get_legend_size_1.getLegendSizeSelector)(state),
        items: internalChartState.getLegendItems(state),
        extraValues: (0, get_legend_items_values_1.getLegendExtraValuesSelector)(state),
        maxFormattedValueWidth: (0, get_longest_legend_formatted_value_1.getLongestLegendFormattedValueWidthSelector)(state),
        config,
    };
};
exports.Legend = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LegendComponent);
//# sourceMappingURL=legend.js.map