import React, { useState, useCallback } from "react";
import GoToCloud from "../../../../components/auth/signIn";
import { Modal, ModalContent, ModalBody, ModalFooter, ModalHeader, Text, Flex, H3, Button, Box, Checkbox, } from "@netdata/netdata-ui";
const MigrationModal = ({ migrationModalPromoInfo, setUserPrefrence, closeModal, savePromoRemindMeSelection, migrationModalPromo, requestRefreshOfAccess, }) => {
    const [isRememberChoiceChecked, setIsRememberChoiceChecked] = useState(false);
    const handleCheckBoxChange = e => {
        setIsRememberChoiceChecked(e.currentTarget.checked);
    };
    const handleClickedCTA1 = useCallback(({ link, toPath }) => {
        const { CTA1 } = migrationModalPromoInfo;
        if (CTA1.action === "NAVIGATE") {
            if (isRememberChoiceChecked) {
                setUserPrefrence(CTA1.userPreference);
                savePromoRemindMeSelection(isRememberChoiceChecked);
            }
            if (toPath !== "agent")
                window.open(link, "_blank");
            closeModal();
        }
        else if (CTA1.action === "REFRESH") {
            requestRefreshOfAccess();
        }
    }, [
        migrationModalPromoInfo,
        setUserPrefrence,
        isRememberChoiceChecked,
        requestRefreshOfAccess,
        savePromoRemindMeSelection,
        closeModal,
    ]);
    const handleClickedCTA2 = useCallback(() => {
        const { CTA2 } = migrationModalPromoInfo;
        if (isRememberChoiceChecked) {
            setUserPrefrence(CTA2.userPreference);
            savePromoRemindMeSelection(isRememberChoiceChecked);
        }
        if (CTA2.action === "NAVIGATE") {
        }
        else if (CTA2.action === "REFRESH") {
            requestRefreshOfAccess();
        }
        closeModal();
    }, [
        migrationModalPromoInfo,
        setUserPrefrence,
        isRememberChoiceChecked,
        requestRefreshOfAccess,
        savePromoRemindMeSelection,
        closeModal,
    ]);
    return migrationModalPromoInfo ? (React.createElement(Modal, null,
        React.createElement(ModalContent, { width: 180, background: "modalBackground" },
            React.createElement(ModalHeader, null,
                React.createElement(H3, { margin: [0] }, migrationModalPromoInfo.title)),
            React.createElement(ModalBody, null,
                React.createElement(Flex, { padding: [0, 0, 4, 0], column: true, gap: 3 },
                    typeof migrationModalPromoInfo.text.header === "function" ? (migrationModalPromoInfo.text.header({})) : (React.createElement(Text, null, migrationModalPromoInfo.text.header)),
                    migrationModalPromoInfo.text.bullets.length > 0 && (React.createElement(Flex, { column: true, gap: 3 },
                        React.createElement(Flex, { column: true, gap: 1, as: "ul" }, migrationModalPromoInfo.text.bullets.map(bullet => {
                            if (typeof bullet === "function") {
                                return React.createElement("li", { key: bullet }, bullet());
                            }
                            return (React.createElement("li", { key: bullet },
                                React.createElement(Text, null, bullet)));
                        })))),
                    migrationModalPromoInfo.text.footer && (React.createElement(Text, { "data-testid": "body-footer" }, migrationModalPromoInfo.text.footer)))),
            React.createElement(ModalFooter, null,
                React.createElement(Box, { margin: [0, "auto", 0, 0] },
                    React.createElement(Checkbox, { "data-ga": `${migrationModalPromo}::click-remind-me::ad`, "data-testid": "remind-me-checkbox", checked: isRememberChoiceChecked, onChange: handleCheckBoxChange, label: migrationModalPromoInfo.tickBoxOption.text })),
                React.createElement(Box, { "data-testid": "cta1", margin: [0, 2, 0, 0], width: { min: 40 } },
                    React.createElement(GoToCloud, { utmParameters: migrationModalPromo }, ({ link }) => (React.createElement(Button, { "data-ga": `${migrationModalPromo}::click-ct1::ad`, textTransform: "none", "data-testid": "cta1-button", onClick: () => handleClickedCTA1({ link, toPath: migrationModalPromoInfo.CTA1.toPath }), width: "100%", label: migrationModalPromoInfo.CTA1.text })))),
                migrationModalPromoInfo.CTA2 && (React.createElement(Box, { "data-ga": `${migrationModalPromo}::click-ct2::ad`, onClick: handleClickedCTA2, height: 10, className: "btn btn-default", "data-testid": "cta2", width: { min: 40 } },
                    React.createElement(Box, { as: Text, sx: { fontWeight: "500", lineHeight: "25px" } }, migrationModalPromoInfo.CTA2.text))))))) : null;
};
export default MigrationModal;
//# sourceMappingURL=migration-modal.js.map