import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Button, ContentDivider, Dropdown, Message, UiIconButton, UiTooltip, isEscapeKey, } from "@gooddata/sdk-ui-kit";
import { AUTOMATION_ATTACHMENTS_DIALOG_TITLE_ID } from "../../../../../constants/automations.js";
export const widgetAttachmentLabels = {
    PNG: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.png" }),
    PPTX: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.pptx" }),
    PDF: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.pdf" }),
    PDF_TABULAR: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.pdfTabular" }),
    XLSX: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.formattedXLSX" }),
    CSV: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.formattedCSV" }),
    CSV_RAW: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.widget.rawCSV" }),
    HTML: "",
};
export const dashboardAttachmentLabels = {
    PPTX: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.dashboard.pptx" }),
    PDF: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.dashboard.pdf" }),
    XLSX: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.dashboard.formattedXLSX" }),
    PDF_SLIDES: _jsx(FormattedMessage, { id: "scheduledEmail.attachmentFormat.dashboard.pdfSlides" }),
};
export const attachmentIcons = {
    PNG: "gd-icon-type-image",
    PPTX: "gd-icon-type-slides",
    PDF: "gd-icon-type-pdf",
    PDF_TABULAR: "gd-icon-type-pdf",
    XLSX: "gd-icon-type-sheet",
    CSV: "gd-icon-type-csv-formatted",
    CSV_RAW: "gd-icon-type-csv-raw",
    PDF_SLIDES: "gd-icon-type-pdf",
    HTML: "",
};
const DROPDOWN_ALIGN_POINTS = [
    {
        align: "bc tc",
        offset: { x: 0, y: 0 },
    },
    {
        align: "tc bc",
        offset: { x: 0, y: 0 },
    },
];
export function AttachmentsSelect({ attachments: initialAttachments, onChange, mode, onAddButtonRef, }) {
    const [attachments, setAttachments] = useState(initialAttachments);
    const intl = useIntl();
    const handleFormatChange = (format) => {
        setAttachments(attachments.map((item) => (item.type === format ? { ...item, selected: !item.selected } : item)));
    };
    const isSomeSelected = attachments.some((item) => item.selected);
    const isDirty = !areAttachmentsEqual(attachments, initialAttachments);
    const dialogTitle = intl.formatMessage({
        id: "dialogs.automation.attachments.add",
    });
    return (_jsx(_Fragment, { children: _jsx(Dropdown, { closeOnParentScroll: true, overlayPositionType: "sameAsTarget", alignPoints: DROPDOWN_ALIGN_POINTS, autofocusOnOpen: true, onOpenStateChanged: (isOpen) => {
                if (!isOpen) {
                    setAttachments(initialAttachments);
                }
            }, renderButton: ({ toggleDropdown, isOpen, dropdownId }) => (_jsx(UiTooltip, { arrowPlacement: "left", triggerBy: ["hover", "focus"], content: dialogTitle, anchor: _jsx(UiIconButton, { icon: "plus", label: dialogTitle, onClick: toggleDropdown, variant: "popout", accessibilityConfig: {
                        ariaExpanded: isOpen,
                        ariaHaspopup: "dialog",
                        ariaControls: isOpen ? dropdownId : undefined,
                    }, ref: onAddButtonRef }) })), renderBody: ({ closeDropdown }) => (_jsxs("div", { className: "gd-attachment-settings-dropdown", role: "dialog", "aria-labelledby": AUTOMATION_ATTACHMENTS_DIALOG_TITLE_ID, onKeyDown: (e) => {
                    if (isEscapeKey(e)) {
                        e.stopPropagation();
                        closeDropdown();
                    }
                }, children: [
                    _jsx("h3", { className: "gd-list-title", id: AUTOMATION_ATTACHMENTS_DIALOG_TITLE_ID, children: dialogTitle }), _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({ id: "close" }),
                                ariaDescribedBy: AUTOMATION_ATTACHMENTS_DIALOG_TITLE_ID,
                            } }) }), _jsxs("div", { className: "gd-attachment-types-content", children: [attachments.map((item) => (_jsx("div", { className: "gd-attachment-type-item", children: _jsxs("label", { className: "input-checkbox-label", children: [
                                        _jsx("input", { type: "checkbox", className: "input-checkbox", checked: item.selected, onChange: () => handleFormatChange(item.type) }), _jsx("span", { className: "input-label-text", children: _jsx("span", { className: `gd-attachment-type-label ${attachmentIcons[item.type]}`, children: mode === "widget"
                                                    ? widgetAttachmentLabels[item.type]
                                                    : dashboardAttachmentLabels[item.type] }) })
                                    ] }) }, item.type))), !isSomeSelected && (_jsx(Message, { type: "warning", children: _jsx(FormattedMessage, { id: "scheduledEmail.attachments.warning.noAttachmentsSelected", values: {
                                        strong: (chunks) => _jsx("strong", { children: chunks }),
                                    } }) }))] }), _jsx(ContentDivider, { className: "gd-divider-without-margin" }), _jsxs("div", { className: "gd-attachment-settings-dropdown-footer", children: [
                            _jsx(Button, { value: intl.formatMessage({ id: "cancel" }), className: "gd-button-secondary", onClick: closeDropdown }), _jsx(Button, { value: intl.formatMessage({ id: "save" }), className: "gd-button-action", onClick: () => {
                                    onChange(attachments);
                                    closeDropdown();
                                }, disabled: !isSomeSelected || !isDirty })
                        ] })
                ] })) }) }));
}
const areAttachmentsEqual = (a, b) => {
    const aSelected = a
        .filter((item) => item.selected)
        .map((item) => item.type)
        .sort();
    const bSelected = b
        .filter((item) => item.selected)
        .map((item) => item.type)
        .sort();
    if (aSelected.length !== bSelected.length)
        return false;
    return aSelected.every((type, idx) => type === bSelected[idx]);
};
