import React from "react";
import styled, { useTheme } from "styled-components";
import Text from "../../asorted/Text";
import Flex from "../../layout/Flex";
import WarningFill from "@ledgerhq/icons-ui/react/WarningFill";
import InformationFill from "@ledgerhq/icons-ui/react/InformationFill";
import CheckmarkCircleFill from "@ledgerhq/icons-ui/react/CheckmarkCircleFill";
import DeleteCircleFill from "@ledgerhq/icons-ui/react/DeleteCircleFill";
const StyledIconContainer = styled.div `
  margin-right: 8px;
  display: flex;
  align-items: center;
`;
const icons = {
    info: React.createElement(InformationFill, { size: "M" }),
    secondary: React.createElement(InformationFill, { size: "M" }),
    success: React.createElement(CheckmarkCircleFill, { size: "M" }),
    warning: React.createElement(WarningFill, { size: "M" }),
    error: React.createElement(DeleteCircleFill, { size: "M" }),
};
const getColors = ({ theme, type }) => {
    switch (type) {
        case "secondary":
            return {
                background: theme.colors.opacityDefault.c05,
                iconColor: theme.colors.neutral.c80,
            };
        case "success":
            return {
                background: theme.colors.success.c10,
                iconColor: theme.colors.success.c50,
            };
        case "warning":
            return {
                background: theme.colors.warning.c10,
                iconColor: theme.colors.warning.c70,
            };
        case "error":
            return {
                background: theme.colors.error.c10,
                iconColor: theme.colors.error.c50,
            };
        case "info":
        default:
            return {
                background: theme.colors.primary.c10,
                iconColor: theme.colors.primary.c80,
            };
    }
};
const StyledAlertContainer = styled(Flex) `
  border-radius: ${p => `${p.theme.radii[2]}px`};
  align-items: start;
`;
const AlertBodyText = styled(Text).attrs({
    flexShrink: 1,
    variant: "bodyLineHeight",
    fontWeight: "semiBold",
}) ``;
const AlertUnderlinedText = styled(AlertBodyText) `
  text-decoration-line: underline;
`;
function Alert({ type = "info", title, showIcon = true, renderContent, renderRight, containerProps, }) {
    const theme = useTheme();
    const { iconColor, background } = getColors({ theme, type });
    const textProps = {
        variant: "bodyLineHeight",
        fontWeight: "semiBold",
    };
    const textColor = "neutral.c100";
    return (React.createElement(StyledAlertContainer, { color: textColor, backgroundColor: background, padding: 6, ...containerProps },
        showIcon && !!icons[type] && (React.createElement(Flex, { color: iconColor },
            React.createElement(StyledIconContainer, null, icons[type]))),
        React.createElement(Flex, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" },
            title && (React.createElement(Text, { ...textProps, color: textColor }, title)),
            renderContent && renderContent({ textProps })),
        React.createElement(Flex, { alignSelf: "center" }, renderRight && renderRight({ textProps }))));
}
Alert.BodyText = AlertBodyText;
Alert.UnderlinedText = AlertUnderlinedText;
export default Alert;
//# sourceMappingURL=index.js.map