import React, { useCallback } from "react";
import GoToCloud from "../../auth/signIn";
import { Modal, ModalContent, ModalBody, ModalFooter, ModalHeader, Text, Flex, H3, Button, Box, ModalCloseButton, } from "@netdata/netdata-ui";
const CloudConnectionStatusModal = ({ title, text, CTA1, closeModal, onRefresh, isCTA1Disabled, }) => {
    const handleClickedCTA1 = useCallback(({ link }) => {
        closeModal();
        window.open(link, "_blank");
    }, [closeModal]);
    return (React.createElement(Modal, null,
        React.createElement(ModalContent, { width: 180, background: "modalBackground" },
            React.createElement(ModalHeader, null,
                React.createElement(H3, { margin: [0] }, title),
                React.createElement(ModalCloseButton, { onClose: closeModal })),
            React.createElement(ModalBody, null,
                React.createElement(Flex, { padding: [0, 0, 4, 0], column: true, gap: 3 },
                    text.header({}),
                    text.bullets.length > 0 && (React.createElement(Flex, { column: true, gap: 3 },
                        React.createElement(Flex, { column: true, gap: 1, as: "ul" }, text.bullets.map((bullet, index) => {
                            if (typeof bullet === "function") {
                                return React.createElement("li", { key: index },
                                    " ",
                                    bullet());
                            }
                            return (React.createElement("li", { key: bullet },
                                React.createElement(Text, null, bullet)));
                        })))),
                    text.footer())),
            React.createElement(ModalFooter, null,
                React.createElement(Box, { "data-testid": "cta1", margin: [0, 2, 0, 0], width: { min: 40 } },
                    React.createElement(GoToCloud, { utmParameters: "Connection-to-cloud" }, ({ link }) => (React.createElement(Button, { "data-ga": `connection-to-cloud::click-ct1::ad`, disabled: isCTA1Disabled, textTransform: "none", "data-testid": "cta1-button", onClick: () => handleClickedCTA1({ link }), width: "100%", label: CTA1.text })))),
                React.createElement(Box, { "data-ga": `connection-to-cloud::click-check-now::ad`, onClick: onRefresh, height: 10, className: "btn btn-default", "data-testid": "cta2-button", width: { min: 40 } },
                    React.createElement(Box, { as: Text, sx: { fontWeight: "500", lineHeight: "25px" } }, "Check Now"))))));
};
export default CloudConnectionStatusModal;
//# sourceMappingURL=cloud-connection-status-modal.js.map