import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Skeleton from "react-loading-skeleton";
import { AddButton, SeparatorLine, UiAutofocus, useIdPrefixed, useListWithActionsKeyboardNavigation, } from "@gooddata/sdk-ui-kit";
import { Alert } from "../../../../automations/alerting/DefaultAlertingManagementDialog/components/Alert.js";
import { DashboardInsightSubmenuContainer } from "../../../insightMenu/DefaultDashboardInsightMenu/DashboardInsightMenu/DashboardInsightSubmenuContainer.js";
const getItemAdditionalActions = () => {
    return ["dropdown", "item"];
};
export function AlertsList({ isLoading, alerts, onCreateAlert, onEditAlert, onPauseAlert, onResumeAlert, onDeleteAlert, onClose, onGoBack, maxAutomationsReached, canCreateAutomation, isExecutionTimestampMode, }) {
    const intl = useIntl();
    const handleEdit = useCallback((alert) => () => onEditAlert(alert), [onEditAlert]);
    const handleTogglePause = useCallback((alert) => () => (alert.alert?.trigger.state === "PAUSED" ? onResumeAlert : onPauseAlert)(alert), [onPauseAlert, onResumeAlert]);
    const handleDelete = useCallback((alert) => () => onDeleteAlert(alert), [onDeleteAlert]);
    const [dropdownOpenAlertId, setDropdownOpenAlertId] = useState(null);
    const handleToggleDropdown = useCallback((alert) => (desiredState) => {
        setDropdownOpenAlertId((prev) => {
            const nextState = desiredState ?? !prev;
            return nextState ? alert.id : null;
        });
    }, []);
    const { focusedAction, focusedItem, onKeyboardNavigation } = useListWithActionsKeyboardNavigation({
        items: alerts,
        getItemAdditionalActions,
        actionHandlers: {
            selectItem: handleEdit,
            item: handleEdit,
            dropdown: (alert) => () => {
                handleToggleDropdown(alert)(true);
            },
        },
        isNestedList: true,
    });
    const listId = useIdPrefixed("AlertsList");
    return (_jsx(DashboardInsightSubmenuContainer, { title: intl.formatMessage({ id: "insightAlert.config.alerts" }), onClose: onClose, onBack: onGoBack, children: _jsxs("div", { className: "gd-alerts-list gd-alerts-list--widget", children: [
                _jsx(UiAutofocus, { children: _jsx("div", { onKeyDown: onKeyboardNavigation, tabIndex: isLoading || alerts.length === 0 ? -1 : 0, className: "gd-alerts-list__items", id: listId, children: isLoading ? (_jsx(LoadingSkeleton, {})) : (_jsx(_Fragment, { children: alerts.length > 0 ? (alerts.map((alert) => {
                                return (_jsx(Alert, { alert: alert, focusedAction: alert === focusedItem ? focusedAction : undefined, listId: listId, isDropdownOpen: dropdownOpenAlertId === alert.id, onToggleDropdown: handleToggleDropdown(alert), onEdit: handleEdit(alert), onTogglePause: handleTogglePause(alert), onDelete: handleDelete(alert) }, alert.id));
                            })) : (_jsx("div", { className: "gd-alerts-list__empty", children: _jsx(FormattedMessage, { id: "insightAlert.config.alerts.empty" }) })) })) }) }), canCreateAutomation ? (_jsxs(_Fragment, { children: [
                        _jsx(SeparatorLine, { pL: 10, pR: 10 }), _jsx("div", { className: "gd-alerts-list__buttons", children: _jsx(AddButton, { onClick: onCreateAlert, title: _jsx(FormattedMessage, { id: "insightAlert.config.addAlert" }), className: "gd-alerts-list__add-button", isDisabled: maxAutomationsReached || isLoading || isExecutionTimestampMode, tooltip: maxAutomationsReached ? (_jsx(FormattedMessage, { id: "insightAlert.maxAlertsReached" })) : isExecutionTimestampMode ? (_jsx(FormattedMessage, { id: "insightAlert.executionTimestampMode" })) : undefined }) })
                    ] })) : null] }) }));
}
function LoadingSkeletonItem() {
    return (_jsxs("div", { className: "gd-react-loading-skeleton-wrapper", children: [
            _jsx(Skeleton, { className: "gd-react-loading-skeleton", circle: true, width: 27, height: 27 }), _jsx(Skeleton, { containerClassName: "skeleton-flex skeleton-margin", className: "gd-react-loading-skeleton", width: "83%", height: 14 })
        ] }));
}
function LoadingSkeleton() {
    return (_jsxs(_Fragment, { children: [
            _jsx(LoadingSkeletonItem, {}), _jsx(LoadingSkeletonItem, {})
        ] }));
}
