import * as classnames from "classnames";
import * as React from "react";
import { useEffect, useState } from "react";
import * as FontAwesome from "react-fontawesome";
import "./AlertBox2.less";
export var AlertBox2Type;
(function (AlertBox2Type) {
    AlertBox2Type["CRITICAL"] = "critical";
    AlertBox2Type["CAUTION"] = "caution";
    AlertBox2Type["SUCCESS"] = "success";
    AlertBox2Type["INFO"] = "info";
    AlertBox2Type["SUPPORT"] = "support";
})(AlertBox2Type || (AlertBox2Type = {}));
var FA_ICON_MAP = {
    critical: "exclamation-circle",
    caution: "exclamation-triangle",
    success: "thumbs-up",
    info: "exclamation-circle",
    support: "life-ring",
};
export var cssClass = {
    CONTAINER: "AlertBox2",
    CONTENT_CONTAINER: "AlertBox2--contentContainer",
    CONTENT_CONTAINER_WITH_BUTTONS: "AlertBox2--contentContainer--withButtons",
    ICON: "AlertBox2--icon",
    CONTENT: "AlertBox2--content",
    CLOSE_BUTTON: "AlertBox2--closeButton",
};
/**
 * TODO: Add short description.
 */
export var AlertBox2 = function (_a) {
    var children = _a.children, className = _a.className, type = _a.type, buttons = _a.buttons, isCloseable = _a.isCloseable, iconOverride = _a.iconOverride, onClose = _a.onClose;
    var _b = useState(false), isClosed = _b[0], setIsClosed = _b[1];
    useEffect(function () {
        setIsClosed(false);
    }, [children, type, isCloseable]);
    if (isClosed) {
        return null;
    }
    var icon = iconOverride || (React.createElement(FontAwesome, { className: classnames(cssClass.ICON, "AlertBox2--icon--" + type), fixedWidth: true, name: FA_ICON_MAP[type] }));
    return (React.createElement("div", { className: classnames(cssClass.CONTAINER, "AlertBox2--" + type, className) },
        React.createElement("div", { className: classnames(cssClass.CONTENT_CONTAINER, !!buttons && cssClass.CONTENT_CONTAINER_WITH_BUTTONS) },
            React.createElement("div", null, icon),
            React.createElement("div", { className: cssClass.CONTENT }, children)),
        React.createElement("div", { className: "AlertBox2--buttons" },
            buttons,
            isCloseable && (React.createElement("button", { "aria-label": "Close", className: cssClass.CLOSE_BUTTON, onClick: function () {
                    if (onClose) {
                        onClose();
                    }
                    setIsClosed(true);
                } }, "\u2715")))));
};
