import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useMemo } from "react";
import { Overlay } from "../../Overlay/Overlay.js";
import { SnapPoint } from "../../typings/positioning.js";
import { positioningToAlignPoints } from "../../utils/positioning.js";
import { PresetsDropdownItem } from "./PresetsDropdownItem.js";
export const PresetsDropdown = memo(function PresetsDropdown(props) {
    const { presets, anchorEl, onClose, positioning = defaultPositioning, selectedPreset, separators, onSelect, customPreset, } = props;
    const renderPresetOption = useCallback((preset, index) => {
        const isPresetItemSelected = preset.localIdentifier === selectedPreset?.localIdentifier;
        return (_jsx(PresetsDropdownItem, { preset: preset, separators: separators, onClick: onSelect, isSelected: isPresetItemSelected }, `${preset.localIdentifier}_${index}`));
    }, [selectedPreset, separators, onSelect]);
    const renderCustomFormatItem = useCallback(() => {
        return renderPresetOption(customPreset, presets.length);
    }, [renderPresetOption, customPreset, presets.length]);
    return (_jsx(Overlay, { closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, alignTo: anchorEl, alignPoints: useMemo(() => positioningToAlignPoints(positioning), [positioning]), onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsxs("div", { className: "gd-measure-number-format-dropdown-body s-measure-number-format-dropdown-body", children: [presets.map((preset, index) => renderPresetOption(preset, index)), renderCustomFormatItem()] }) }) }));
});
const defaultPositioning = [
    { snapPoints: { parent: SnapPoint.BottomLeft, child: SnapPoint.TopLeft } },
    { snapPoints: { parent: SnapPoint.TopLeft, child: SnapPoint.BottomLeft } },
];
