import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useMemo, useState } from "react";
import { Button } from "../../Button/Button.js";
import { Overlay } from "../../Overlay/Overlay.js";
import { SnapPoint } from "../../typings/positioning.js";
import { positioningToAlignPoints } from "../../utils/positioning.js";
import { DocumentationLink } from "./DocumentationLink.js";
import { FormatInputWithIntl } from "./FormatInput.js";
import { Preview } from "./previewSection/Preview.js";
export const CustomFormatDialog = memo(function CustomFormatDialog({ onApply, onCancel, formatString, documentationLink, anchorEl, positioning = [
    // Try positioning to the right first
    { snapPoints: { parent: SnapPoint.CenterRight, child: SnapPoint.CenterLeft } },
    { snapPoints: { parent: SnapPoint.TopRight, child: SnapPoint.TopLeft } },
    { snapPoints: { parent: SnapPoint.BottomRight, child: SnapPoint.BottomLeft } },
    // Fall back to positioning to the left if no room on the right
    { snapPoints: { parent: SnapPoint.CenterLeft, child: SnapPoint.CenterRight } },
    { snapPoints: { parent: SnapPoint.TopLeft, child: SnapPoint.TopRight } },
    { snapPoints: { parent: SnapPoint.BottomLeft, child: SnapPoint.BottomRight } },
], separators, templates, intl, }) {
    const [format, setFormat] = useState(formatString || "");
    const handleApply = useCallback(() => {
        onApply(format);
    }, [onApply, format]);
    const isApplyButtonDisabled = useMemo(() => formatString === format || format === "", [formatString, format]);
    const onFormatChange = useCallback((newFormat) => {
        setFormat(newFormat);
    }, []);
    return (_jsx(Overlay, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, alignTo: anchorEl, alignPoints: positioningToAlignPoints(positioning), onClose: onCancel, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsxs("div", { className: "gd-measure-custom-format-dialog-body s-custom-format-dialog-body", children: [
                    _jsx("div", { className: "gd-measure-custom-format-dialog-header", children: _jsx("span", { children: intl.formatMessage({ id: "measureNumberCustomFormatDialog.title" }) }) }), _jsxs("div", { className: "gd-measure-custom-format-dialog-content", children: [
                            _jsx(FormatInputWithIntl, { format: format, templates: templates, separators: separators, onFormatChange: onFormatChange }), documentationLink ? _jsx(DocumentationLink, { url: documentationLink }) : null, _jsx(Preview, { format: format, separators: separators })
                        ] }), _jsxs("div", { className: "gd-measure-custom-format-dialog-footer", children: [
                            _jsx(Button, { className: "gd-button-secondary gd-button-small s-custom-format-dialog-cancel", onClick: onCancel, value: intl.formatMessage({ id: "cancel" }) }), _jsx(Button, { className: "gd-button-action gd-button-small s-custom-format-dialog-apply", onClick: handleApply, value: intl.formatMessage({ id: "apply" }), disabled: isApplyButtonDisabled })
                        ] })
                ] }) }) }));
});
