import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useState } from "react";
import { Overlay } from "../../../Overlay/Overlay.js";
import { DropdownItem } from "./DropdownItem.js";
import { DropdownToggleButton } from "./DropdownToggleButton.js";
export const FormatTemplatesDropdown = memo(function FormatTemplatesDropdown({ onChange, separators, templates, }) {
    const [isOpened, setIsOpened] = useState(false);
    const closeDropdown = useCallback(() => {
        setIsOpened(false);
    }, []);
    const onSelect = useCallback((selectedPreset) => {
        onChange(selectedPreset.format);
        setTimeout(() => {
            closeDropdown();
        });
    }, [onChange, closeDropdown]);
    const toggleDropdown = useCallback(() => {
        setIsOpened((state) => !state);
    }, []);
    return (_jsxs("div", { className: "gd-measure-format-templates", children: [
            _jsx(DropdownToggleButton, { toggleDropdown: toggleDropdown, isOpened: isOpened }), isOpened ? (_jsx(Overlay, { closeOnOutsideClick: true, closeOnParentScroll: true, alignTo: ".gd-measure-custom-format-dialog-section-title", alignPoints: [{ align: "br tr" }, { align: "cr cl", offset: { x: 10 } }], onClose: closeDropdown, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsx("div", { className: "gd-measure-number-format-dropdown-body s-measure-number-format-templates-dropdown", children: templates.map((template) => (_jsx(DropdownItem, { template: template, onClick: onSelect, separators: separators }, template.localIdentifier))) }) }) })) : null] }));
});
