import Icon from "react-oui-icons";
import classNames from "classnames";
import React, { FunctionComponent, ReactElement } from "react";

import Button from "../Button";

import { getAssistiveTextFromColorClass } from "../../utils/accessibility";

const renderDismissButton = (testSection?: string): ReactElement => {
    return (
        <div className="oui-attention__close">
            <Button style="plain" size="small" ariaLabel="Close alert" testSection={`${testSection}-dismiss`}>
                <Icon name="close" size="small" />
            </Button>
        </div>
    );
};

export type AttentionProps = {
    alignment?: "left" | "center";
    children?: any;
    /** CSS class names. */
    className?: string;
    isDismissible?: boolean;
    testSection?: string;
    type?: "bad-news" | "brand" | "good-news" | "warning";
};

const Attention: FunctionComponent<AttentionProps> = ({
    alignment = "left",
    children,
    className,
    isDismissible,
    testSection,
    type = "brand",
    ...props
}: AttentionProps) => {
    const colorClassName = `oui-attention--${type}`;
    const alignmentClassName = `oui-text--${alignment}`;
    const attentionAriaLabel = getAssistiveTextFromColorClass(type);
    const alignClass = `oui-attention ${colorClassName} ${alignmentClassName}`.trim();
    const classes = classNames({
        [`${alignClass}`]: true,
    }, className);
    const dismissBtn = isDismissible ? renderDismissButton(testSection) : null;
    return (
        <div
            data-oui-component={true}
            className={classes}
            data-test-section={testSection}
            aria-label={attentionAriaLabel}
            role="alert"
            {...props}
        >
            {children}
            {dismissBtn}
        </div>
    );
};

export default Attention;