import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
import { BaseChartConfigurationPanel } from "./BaseChartConfigurationPanel.js";
import { messages } from "../../../locales.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 { LegendSection } from "../configurationControls/legend/LegendSection.js";
import { OrientationDropdownControl } from "../configurationControls/OrientationDropdownControl.js";
import { TotalSection } from "../configurationControls/total/TotalSection.js";
import { countItemsOnAxes } from "../pluggableVisualizations/baseChart/insightIntrospection.js";
const TOOLTIP_ARROW_OFFSET = { "tc bc": [BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y] };
const TOOLTIP_ALIGN_POINT = [{ align: "tc bc" }];
export class WaterfallChartConfigurationPanel extends BaseChartConfigurationPanel {
    renderConfigurationPanel() {
        const { gridEnabled, axes } = this.getControlProperties();
        const { properties, propertiesMeta, pushData, dataLabelDefaultValue = false } = this.props;
        const controlsDisabled = this.isControlDisabled();
        return (_jsxs(BubbleHoverTrigger, { showDelay: SHOW_DELAY_DEFAULT, hideDelay: HIDE_DELAY_DEFAULT, children: [
                _jsxs("div", { children: [this.renderColorSection(), this.getBaseChartAxisSection(axes), this.renderLegendSection(), _jsx(TotalSection, { controlsDisabled: controlsDisabled, properties: properties, propertiesMeta: propertiesMeta, pushData: pushData }), this.renderInteractionsSection(), _jsxs(ConfigSection, { id: "canvas_section", className: "gd-canvas-section", title: messages["canvasTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: [
                                _jsx(OrientationDropdownControl, { pushData: pushData, properties: properties, disabled: controlsDisabled, value: properties?.controls?.["orientation"]?.position || "horizontal", showDisabledMessage: false }), _jsx(DataLabelsControl, { pushData: pushData, properties: properties, isDisabled: controlsDisabled, defaultValue: dataLabelDefaultValue }), _jsx(CheckboxControl, { valuePath: "grid.enabled", labelText: messages["canvasGridLine"].id, properties: properties, checked: gridEnabled, disabled: controlsDisabled, pushData: pushData })
                            ] }), this.renderAdvancedSection()] }), _jsx(Bubble, { className: this.getBubbleClassNames(), arrowOffsets: TOOLTIP_ARROW_OFFSET, alignPoints: TOOLTIP_ALIGN_POINT, children: _jsx(FormattedMessage, { id: "properties.config.not_applicable" }) })
            ] }));
    }
    renderLegendSection() {
        const { properties, propertiesMeta, pushData } = this.props;
        const controlsDisabled = this.isControlDisabled();
        return (_jsx(LegendSection, { properties: properties, propertiesMeta: propertiesMeta, controlsDisabled: controlsDisabled, defaultLegendEnabled: false, pushData: pushData }));
    }
    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 isPrimaryAxis = controls?.["orientation"]?.position === "vertical" ? axis.name === "xaxis" : axis.primary;
            const isPrimaryAxisWithMoreThanOneItem = isPrimaryAxis && (itemsOnAxes?.[axis.name] ?? 0) > 1;
            const nameSubsectionDisabled = !isViewedBy || isPrimaryAxisWithMoreThanOneItem;
            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: nameSubsectionDisabled, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData }), _jsx(LabelSubsection, { disabled: false, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData, showFormat: isPrimaryAxis }), isPrimaryAxis ? this.renderMinMax(axis.name) : null] }, name));
        });
    }
}
//# sourceMappingURL=WaterfallChartConfigurationPanel.js.map