import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2019-2025 GoodData Corporation
import { memo, useCallback, useEffect } from "react";
import { Overlay } from "@gooddata/sdk-ui-kit";
export var DropdownVersionType;
(function (DropdownVersionType) {
    DropdownVersionType[DropdownVersionType["ColorPalette"] = 0] = "ColorPalette";
    DropdownVersionType[DropdownVersionType["ColorPicker"] = 1] = "ColorPicker";
})(DropdownVersionType || (DropdownVersionType = {}));
const ALIGN_POINTS_COLOR_PALETTE_PICKER = [
    {
        align: "bl tl",
        offset: {
            x: 0,
            y: 2,
        },
    },
    {
        align: "tl bl",
        offset: {
            x: 0,
            y: 2,
        },
    },
];
const ALIGN_POINTS_CUSTOM_COLOR_PICKER = [
    {
        align: "cr cl",
        offset: {
            x: 5,
            y: 0,
        },
    },
    {
        align: "br bl",
        offset: {
            x: 5,
            y: 100,
        },
    },
    {
        align: "br bl",
        offset: {
            x: 5,
            y: 0,
        },
    },
];
export const ColorOverlay = memo(function ColorOverlay({ alignTo, dropdownVersion, onClose: onCloseProp, children, }) {
    const stopPropagation = useCallback((e) => {
        e.stopPropagation();
    }, []);
    const stopScrollingPropagation = useCallback(() => {
        document.body.addEventListener("wheel", stopPropagation);
    }, [stopPropagation]);
    const startScrollingPropagation = useCallback(() => {
        document.body.removeEventListener("wheel", stopPropagation);
    }, [stopPropagation]);
    useEffect(() => {
        return () => {
            startScrollingPropagation();
        };
    }, [startScrollingPropagation]);
    const getAlignPoints = useCallback(() => {
        if (dropdownVersion === DropdownVersionType.ColorPalette) {
            return ALIGN_POINTS_COLOR_PALETTE_PICKER;
        }
        return ALIGN_POINTS_CUSTOM_COLOR_PICKER;
    }, [dropdownVersion]);
    const onClose = useCallback(() => {
        onCloseProp();
    }, [onCloseProp]);
    return (_jsx(Overlay, { alignTo: alignTo, onClose: onClose, alignPoints: getAlignPoints(), closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, children: _jsx("div", { onMouseOver: stopScrollingPropagation, onMouseOut: startScrollingPropagation, "aria-label": "Color overlay content", children: children }) }));
});
//# sourceMappingURL=ColorOverlay.js.map