import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { isEmpty } from "lodash-es";
import { FormattedMessage } from "react-intl";
import { bucketsById, bucketsIsEmpty, insightBuckets } from "@gooddata/sdk-model";
import { BucketNames } from "@gooddata/sdk-ui";
import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
import { ConfigurationPanelContent, } from "./ConfigurationPanelContent.js";
import { messages } from "../../../locales.js";
import { AXIS, BASE_CHART_AXIS_CONFIG, DUAL_AXES_SUPPORTED_CHARTS } from "../../constants/axis.js";
import { BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y, HIDE_DELAY_DEFAULT, SHOW_DELAY_DEFAULT, } from "../../constants/bubble.js";
import { LabelSubsection } from "../configurationControls/axis/LabelSubsection.js";
import { NameSubsection } from "../configurationControls/axis/NameSubsection.js";
import { CheckboxControl } from "../configurationControls/CheckboxControl.js";
import { ConfigSection } from "../configurationControls/ConfigSection.js";
import { DataLabelsControl } from "../configurationControls/DataLabelsControl.js";
import { MinMaxControl } from "../configurationControls/MinMaxControl.js";
import { countItemsOnAxes } from "../pluggableVisualizations/baseChart/insightIntrospection.js";
export class BaseChartConfigurationPanel extends ConfigurationPanelContent {
    renderCanvasSection() {
        const { gridEnabled } = this.getControlProperties();
        const { properties, propertiesMeta, pushData, insight } = this.props;
        const controlsDisabled = this.isControlDisabled();
        const { buckets } = insight.insight;
        const stackBy = bucketsById(buckets, BucketNames.STACK);
        const isNotStacked = isEmpty(stackBy);
        return (_jsxs(ConfigSection, { id: "canvas_section", title: messages["canvasTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: [_jsx(DataLabelsControl, { pushData: pushData, properties: properties, isDisabled: controlsDisabled, isTotalsDisabled: controlsDisabled ||
                        !!properties?.controls?.["stackMeasuresToPercent"] ||
                        (isNotStacked && !properties?.controls?.["stackMeasures"]), enableSeparateTotalLabels: true }), _jsx(CheckboxControl, { valuePath: "grid.enabled", labelText: messages["canvasGridLine"].id, properties: properties, checked: gridEnabled, disabled: controlsDisabled, pushData: pushData })] }));
    }
    renderConfigurationPanel() {
        const { axes } = this.getControlProperties();
        return (_jsxs(BubbleHoverTrigger, { showDelay: SHOW_DELAY_DEFAULT, hideDelay: HIDE_DELAY_DEFAULT, children: [_jsxs("div", { children: [this.renderColorSection(), this.getBaseChartAxisSection(axes), this.renderLegendSection(), this.renderInteractionsSection(), this.renderCanvasSection(), this.renderAdvancedSection()] }), _jsx(Bubble, { className: this.getBubbleClassNames(), arrowOffsets: { "tc bc": [BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y] }, alignPoints: [{ align: "tc bc" }], children: _jsx(FormattedMessage, { id: "properties.config.not_applicable" }) })] }));
    }
    getAxesConfiguration(type) {
        return BASE_CHART_AXIS_CONFIG[type];
    }
    getControlProperties() {
        const props = this.props;
        const gridEnabled = props.properties?.controls?.["grid"]?.enabled ?? true;
        const axisType = DUAL_AXES_SUPPORTED_CHARTS.includes(props.type)
            ? (props.axis ?? AXIS.PRIMARY)
            : AXIS.PRIMARY;
        const configurations = this.getAxesConfiguration(axisType);
        const axes = configurations.map((axis) => {
            return {
                ...axis,
                visible: props.properties?.controls?.[axis.name]?.visible ?? true,
            };
        });
        return {
            gridEnabled,
            axes,
        };
    }
    getBubbleClassNames() {
        return cx("bubble-primary", {
            invisible: !this.isControlDisabled(),
        });
    }
    isViewedBy() {
        const { insight } = this.props;
        if (!insight) {
            return false;
        }
        return !bucketsIsEmpty(insightBuckets(insight, BucketNames.VIEW, BucketNames.TREND));
    }
    getBaseChartAxisSection(axes) {
        const { type, properties, propertiesMeta, pushData, insight } = this.props;
        const controls = properties?.controls;
        const controlsDisabled = this.isControlDisabled();
        const isViewedBy = this.isViewedBy();
        const itemsOnAxes = countItemsOnAxes(type, controls, insight);
        return axes.map((axis) => {
            const disabled = controlsDisabled || (!axis.primary && !isViewedBy);
            const nameSubsectionDisabled = axis.primary && itemsOnAxes[axis.name] > 1;
            const { name, title, subtitle, visible } = axis;
            return (_jsxs(ConfigSection, { id: `${name}_section`, title: title, subtitle: subtitle, valuePath: `${name}.visible`, canBeToggled: true, toggledOn: visible, toggleDisabled: controlsDisabled, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: [_jsx(NameSubsection, { disabled: disabled || nameSubsectionDisabled, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData }), _jsx(LabelSubsection, { disabled: disabled, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData, showFormat: axis.primary }), axis.primary ? this.renderMinMax(axis.name) : null] }, name));
        });
    }
    renderMinMax(basePath) {
        const { pushData, properties, propertiesMeta } = this.props;
        return (_jsx(MinMaxControl, { isDisabled: this.isControlDisabled(), basePath: basePath, pushData: pushData, properties: properties, propertiesMeta: propertiesMeta }));
    }
}
//# sourceMappingURL=BaseChartConfigurationPanel.js.map