import { Button, InlineLoading, InlineNotification, ModalBody, ModalFooter, ModalHeader, Stack, } from "@carbon/react";
import React from "react";
import styled from "styled-components";
import { headingStyles } from "../c3-help-center/styles";
export const StyledModalBody = styled(ModalBody) `
	${headingStyles}
`;
const StyledModalFooter = styled(ModalFooter) `
	background-color: ${({ $c3Theme }) => $c3Theme === "light" ? "#FFFFFF" : "#161616"};
`;
export const OnboardingModal = ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled = false, secondaryButtonText = "Cancel", tertiaryButtonText, loadingText, error = { title: "", description: "" }, danger = false, theme, onRequestClose, onSecondary, onPrimary, onTertiary, children, }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(ModalHeader, { title: heading, label: headingLabel, style: {
                pointerEvents: isDoingAsyncWork ? "none" : "unset",
                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                marginBottom: 0,
            }, closeModal: () => onRequestClose(false) }),
        React.createElement(StyledModalBody, { style: {
                marginBottom: "0px",
                paddingBottom: "3rem",
                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
            } },
            React.createElement("div", { style: { minHeight: "520px" } },
                React.createElement(Stack, { gap: 6 },
                    children,
                    error.title ? (React.createElement(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : ("")))),
        React.createElement(StyledModalFooter, { "$c3Theme": theme }, (() => {
            if (tertiaryButtonText && onTertiary !== undefined) {
                return (React.createElement(React.Fragment, null,
                    React.createElement(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary() }, tertiaryButtonText),
                    React.createElement(Button, { style: { paddingRight: "1rem", marginLeft: "33%" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
                            if (onPrimary) {
                                onPrimary();
                            }
                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
            }
            else {
                return (React.createElement(React.Fragment, null,
                    (() => {
                        let button = React.createElement(React.Fragment, null);
                        if (secondaryButtonText && onSecondary) {
                            button = (React.createElement(Button, { kind: "secondary", disabled: isDoingAsyncWork, onClick: () => onSecondary?.(), style: { marginLeft: "33%" } }, secondaryButtonText));
                        }
                        return button;
                    })(),
                    React.createElement(Button, { style: { paddingRight: "1rem" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
                            if (onPrimary) {
                                onPrimary();
                            }
                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
            }
        })())));
};
