import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback, useMemo } from "react";
import { cloneDeep, set } from "lodash-es";
import { useIntl } from "react-intl";
import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
import { CheckboxControl } from "./CheckboxControl.js";
import { DropdownControl } from "./DropdownControl.js";
import { messages } from "../../../locales.js";
import { pushpinViewportDropdownItems } from "../../constants/dropdowns.js";
import { getTranslatedDropdownItems } from "../../utils/translations.js";
function getViewportProperty(props) {
    const viewport = props.properties?.controls?.["viewport"];
    return {
        ...viewport,
        area: viewport?.area ?? "auto",
    };
}
const TOOLTIP_ALIGN_POINTS = [{ align: "cr cl", offset: { x: 5, y: 0 } }];
/**
 * Generic viewport control for geo charts (pushpin and area).
 * Allows users to select a default viewport and configure navigation interactions.
 *
 * @internal
 */
export function GeoViewportControl(props) {
    const intl = useIntl();
    const { area, navigation } = getViewportProperty(props);
    const isPanEnabled = navigation?.pan ?? true;
    const isZoomEnabled = navigation?.zoom ?? true;
    const { disabled, properties, pushData, getCurrentMapView, beforeNavigationContent, className = "s-geo-viewport-control", } = props;
    const isAdvancedViewportConfigEnabled = Boolean(getCurrentMapView);
    const effectiveArea = !isAdvancedViewportConfigEnabled && area === "custom" ? "auto" : area;
    const shouldRenderNavigationControls = isAdvancedViewportConfigEnabled;
    const handleViewportPushData = useCallback((data) => {
        const nextProperties = cloneDeep(data.properties ?? properties);
        if (!nextProperties) {
            pushData?.(data);
            return;
        }
        const selectedArea = nextProperties?.controls?.["viewport"]?.area;
        if (selectedArea === "custom") {
            const currentMapView = getCurrentMapView?.();
            const hasValidSnapshot = Boolean(currentMapView?.center) && typeof currentMapView?.zoom === "number";
            if (hasValidSnapshot && currentMapView?.center) {
                set(nextProperties, "controls.center", currentMapView.center);
                set(nextProperties, "controls.zoom", currentMapView.zoom);
            }
        }
        else {
            set(nextProperties, "controls.center", undefined);
            set(nextProperties, "controls.zoom", undefined);
        }
        pushData?.({
            ...data,
            properties: nextProperties,
        });
    }, [getCurrentMapView, properties, pushData]);
    const viewportItems = useMemo(() => {
        if (isAdvancedViewportConfigEnabled) {
            return pushpinViewportDropdownItems;
        }
        return pushpinViewportDropdownItems.filter((item) => item.value !== "custom");
    }, [isAdvancedViewportConfigEnabled]);
    const translatedViewportItems = useMemo(() => getTranslatedDropdownItems(viewportItems, intl), [viewportItems, intl]);
    return (_jsxs("div", { className: `gd-geo-viewport-control ${className}`, children: [
            _jsx(DropdownControl, { value: effectiveArea, valuePath: "viewport.area", labelText: messages["viewportAreaTitle"].id, disabled: disabled, showDisabledMessage: disabled, properties: properties, pushData: handleViewportPushData, items: translatedViewportItems }), beforeNavigationContent, shouldRenderNavigationControls ? (_jsxs("div", { className: "gd-geo-viewport-control__navigation", children: [
                    _jsxs("div", { className: "gd-geo-viewport-control__navigation-title", children: [
                            _jsx("span", { className: "input-label-text", children: intl.formatMessage({ id: messages["viewportNavigationTitle"].id }) }), _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [
                                    _jsx("span", { className: "gd-interactions-section__question-mark gd-icon-circle-question" }), _jsx(Bubble, { alignPoints: TOOLTIP_ALIGN_POINTS, children: intl.formatMessage({ id: messages["viewportNavigationTooltip"].id }) })
                                ] }), _jsx("span", { className: "gd-geo-viewport-control__navigation-line" })
                        ] }), _jsxs("div", { className: "gd-geo-viewport-control__navigation-options", children: [
                            _jsx(CheckboxControl, { valuePath: "viewport.navigation.pan", labelText: messages["viewportNavigationPan"].id, properties: properties, checked: isPanEnabled, disabled: disabled, showDisabledMessage: disabled, pushData: pushData, defaultValue: true }), _jsx(CheckboxControl, { valuePath: "viewport.navigation.zoom", labelText: messages["viewportNavigationZoom"].id, properties: properties, checked: isZoomEnabled, disabled: disabled, showDisabledMessage: disabled, pushData: pushData, defaultValue: true })
                        ] })
                ] })) : null] }));
}
//# sourceMappingURL=GeoViewportControl.js.map