import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { useState } from "react";
import { useIntl } from "react-intl";
import { getInsightVisualizationMeta } from "@gooddata/sdk-ui-ext";
import { Bubble, BubbleHoverTrigger, Checkbox, Message } from "@gooddata/sdk-ui-kit";
import { changeInsightWidgetVisProperties } from "../../../../model/commands/insight.js";
import { useDashboardDispatch, useDashboardSelector, } from "../../../../model/react/DashboardStoreProvider.js";
import { selectInsightByRef } from "../../../../model/store/insights/insightsSelectors.js";
export function ZoomInsightConfiguration({ widget }) {
    const intl = useIntl();
    // useState helps the status of checkbox change faster than using the zoomable value
    const [zoomInsightState, setZoomInsightStatus] = useState(widget.properties?.["controls"]?.zoomInsight);
    const dispatch = useDashboardDispatch();
    const insight = useDashboardSelector(selectInsightByRef(widget.insight));
    if (!insight) {
        return null;
    }
    const visualizationMeta = getInsightVisualizationMeta(insight);
    if (!visualizationMeta.supportsZooming) {
        return null;
    }
    const handleZoomableChange = (isChecked) => {
        setZoomInsightStatus(isChecked);
        dispatch(changeInsightWidgetVisProperties(widget.ref, {
            ...widget.properties,
            controls: { ...widget.properties?.["controls"], zoomInsight: isChecked },
        }));
    };
    return (_jsxs("div", { className: "s-zoom-and-pan zoom-and-pan-section configuration-category", children: [
            _jsx(Checkbox, { onChange: handleZoomableChange, value: zoomInsightState, text: intl.formatMessage({ id: "configurationPanel.zoomInsight" }) }), _jsxs(BubbleHoverTrigger, { tagName: "abbr", hideDelay: 1000, showDelay: 100, children: [
                    _jsx("i", { className: "gd-button-link gd-icon-circle-question s-circle_question gd-button" }), _jsx(Bubble, { alignTo: ".gd-icon-circle-question", alignPoints: [{ align: "cr cl" }], children: intl.formatMessage({ id: "configurationPanel.zoomInsight.help" }) })
                ] }), zoomInsightState ? (_jsx(Message, { type: "progress", children: intl.formatMessage({ id: "configurationPanel.zoomInsight.notice" }) })) : null] }));
}
//# sourceMappingURL=ZoomInsightConfiguration.js.map