import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { bucketIsEmpty, insightBucket, insightHasMeasures, } 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 { BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y, HIDE_DELAY_DEFAULT, SHOW_DELAY_DEFAULT, } from "../../constants/bubble.js";
import { CheckboxControl } from "../configurationControls/CheckboxControl.js";
import { ColorsSection } from "../configurationControls/colors/ColorsSection.js";
import { ConfigSection } from "../configurationControls/ConfigSection.js";
import { LegendSection } from "../configurationControls/legend/LegendSection.js";
import { PushpinSizeControl } from "../configurationControls/PushpinSizeControl.js";
import { PushpinViewportControl } from "../configurationControls/PushpinViewportControl.js";
export class GeoPushpinConfigurationPanel extends ConfigurationPanelContent {
    getControlProperties() {
        const groupNearbyPoints = this.props.properties?.controls?.["points"]?.groupNearbyPoints ?? true;
        return {
            groupNearbyPoints,
        };
    }
    renderLegendSection() {
        const { insight, properties, propertiesMeta, pushData } = this.props;
        const isLegendVisible = hasSegmentAttribute(insight) || hasColorMeasure(insight) || hasSizeMeasure(insight);
        const controlsDisabled = this.isControlDisabled() || !isLegendVisible;
        return (_jsx(LegendSection, { properties: properties, propertiesMeta: propertiesMeta, controlsDisabled: controlsDisabled, pushData: pushData }));
    }
    renderViewportSection() {
        const { properties, propertiesMeta, pushData } = this.props;
        return (_jsx(ConfigSection, { id: "map_section", title: messages["pointsMapTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: _jsx(PushpinViewportControl, { properties: properties, disabled: this.isControlDisabled(), pushData: pushData }) }));
    }
    renderPointsSection() {
        const { groupNearbyPoints } = this.getControlProperties();
        const { properties, propertiesMeta, pushData, insight } = this.props;
        const isControlDisabled = this.isControlDisabled();
        const isClusteringDisabled = isControlDisabled || insightHasMeasures(insight) || hasSegmentAttribute(insight);
        const isPushpinSizeControlDisabled = isControlDisabled || !hasSizeMeasure(insight);
        return (_jsxs(ConfigSection, { id: "points_section", title: messages["pointsTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: [_jsx(CheckboxControl, { valuePath: "points.groupNearbyPoints", labelText: messages["pointsGroupNearbyPoints"].id, properties: properties, checked: groupNearbyPoints, disabled: isClusteringDisabled, showDisabledMessage: isClusteringDisabled, pushData: pushData }), _jsx(PushpinSizeControl, { properties: properties, disabled: isPushpinSizeControlDisabled, pushData: pushData })] }));
    }
    isControlDisabled() {
        const { insight, isError, isLoading } = this.props;
        return !!(!hasLocationAttribute(insight) || isError || isLoading);
    }
    getBubbleClassNames() {
        return cx("bubble-primary", {
            invisible: !this.isControlDisabled(),
        });
    }
    renderConfigurationPanel() {
        return (_jsxs(BubbleHoverTrigger, { showDelay: SHOW_DELAY_DEFAULT, hideDelay: HIDE_DELAY_DEFAULT, children: [_jsxs("div", { children: [this.renderColorSection(), this.renderLegendSection(), this.renderViewportSection(), this.renderPointsSection()] }), _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" }) })] }));
    }
    renderColorSection() {
        const { properties, propertiesMeta, pushData, colors, references, isLoading } = this.props;
        const controlsDisabled = this.isControlDisabled();
        return (_jsx(ColorsSection, { properties: properties, propertiesMeta: propertiesMeta, references: references, colors: colors, controlsDisabled: controlsDisabled, pushData: pushData, hasMeasures // hasMeasures is true because Color Config is based on Attribute
            : true, isLoading: isLoading, supportsChartFill: false }));
    }
}
function hasColorMeasure(insight) {
    if (!insight) {
        return false;
    }
    const bucket = insightBucket(insight, BucketNames.COLOR);
    return bucket !== undefined && !bucketIsEmpty(bucket);
}
function hasSizeMeasure(insight) {
    if (!insight) {
        return false;
    }
    const bucket = insightBucket(insight, BucketNames.SIZE);
    return bucket !== undefined && !bucketIsEmpty(bucket);
}
function hasLocationAttribute(insight) {
    if (!insight) {
        return false;
    }
    const bucket = insightBucket(insight, BucketNames.LOCATION);
    return bucket !== undefined && !bucketIsEmpty(bucket);
}
function hasSegmentAttribute(insight) {
    if (!insight) {
        return false;
    }
    const bucket = insightBucket(insight, BucketNames.SEGMENT);
    return bucket !== undefined && !bucketIsEmpty(bucket);
}
//# sourceMappingURL=GeoPushpinConfigurationPanel.js.map