import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useState } from "react";
import { defineMessages, useIntl } from "react-intl";
import { Button, ContentDivider, Dropdown, UiIcon, UiTooltip, isEscapeKey, } from "@gooddata/sdk-ui-kit";
const DROPDOWN_ALIGN_POINTS = [
    { align: "bc tc", offset: { x: 0, y: 0 } },
    { align: "tc bc", offset: { x: 0, y: 0 } },
];
const messages = defineMessages({
    settingsTitle: { id: "export.template.settings.title" },
    cancel: { id: "cancel" },
    save: { id: "save" },
    close: { id: "close" },
});
export function SlidesTemplateSettings({ templates, templateId, onTemplateIdChange, }) {
    const intl = useIntl();
    const [pendingTemplateId, setPendingTemplateId] = useState(undefined);
    if (templates.length <= 1) {
        return null;
    }
    const settingsLabel = intl.formatMessage(messages.settingsTitle);
    const effectiveSelection = pendingTemplateId ?? templateId ?? templates[0]?.id;
    const isSaveDisabled = effectiveSelection === templateId;
    return (_jsx(Dropdown, { alignPoints: DROPDOWN_ALIGN_POINTS, closeOnParentScroll: true, autofocusOnOpen: true, onOpenStateChanged: (isOpen) => {
            if (!isOpen) {
                setPendingTemplateId(undefined);
            }
        }, renderButton: ({ toggleDropdown, buttonRef, ariaAttributes }) => (_jsx("button", { className: "gd-attachment-chip-button s-slides-template-button", onClick: toggleDropdown, ref: buttonRef, "aria-label": settingsLabel, ...ariaAttributes, children: _jsx(UiIcon, { type: "settings", size: 14, color: "complementary-8" }) })), renderBody: ({ closeDropdown, ariaAttributes: bodyAriaAttributes }) => (_jsxs("div", { className: "gd-attachment-settings-dropdown s-slides-template-dropdown", ...bodyAriaAttributes, onKeyDown: (e) => {
                if (isEscapeKey(e)) {
                    e.stopPropagation();
                    closeDropdown();
                }
            }, children: [
                _jsx("h3", { className: "gd-list-title", children: settingsLabel }), _jsx("span", { className: "gd-close-button", children: _jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-cross s-dialog-close-button", value: "", onClick: closeDropdown, accessibilityConfig: {
                            ariaLabel: intl.formatMessage(messages.close),
                        } }) }), _jsx("div", { className: "gd-attachment-settings-dropdown-content", children: _jsx("div", { className: "gd-slides-template-dropdown-list", role: "radiogroup", "aria-label": settingsLabel, children: templates.map((template) => (_jsx(UiTooltip, { triggerBy: ["hover", "focus"], arrowPlacement: "bottom", content: template.name, anchor: _jsxs("label", { className: "input-radio-label s-slides-template-item", children: [
                                    _jsx("input", { type: "radio", className: "input-radio", name: "slidesTemplate", value: template.id, checked: effectiveSelection === template.id, onChange: () => setPendingTemplateId(template.id) }), _jsx("span", { className: "input-label-text", children: template.name })
                                ] }) }, template.id))) }) }), _jsx(ContentDivider, { className: "gd-divider-without-margin" }), _jsxs("div", { className: "gd-attachment-settings-dropdown-footer", children: [
                        _jsx(Button, { value: intl.formatMessage(messages.cancel), className: "gd-button-secondary", onClick: closeDropdown }), _jsx(Button, { value: intl.formatMessage(messages.save), className: "gd-button-action", onClick: () => {
                                if (effectiveSelection) {
                                    onTemplateIdChange(effectiveSelection);
                                }
                                closeDropdown();
                            }, disabled: isSaveDisabled })
                    ] })
            ] })) }));
}
