import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import React from "react";
export var AlertType;
(function (AlertType) {
    AlertType[AlertType["INFO"] = 0] = "INFO";
    AlertType[AlertType["SUCCESS"] = 1] = "SUCCESS";
    AlertType[AlertType["DANGER"] = 2] = "DANGER";
    AlertType[AlertType["WARNING"] = 3] = "WARNING";
})(AlertType || (AlertType = {}));
export var AlertSize;
(function (AlertSize) {
    AlertSize[AlertSize["Normal"] = 0] = "Normal";
    AlertSize[AlertSize["Large"] = 1] = "Large";
})(AlertSize || (AlertSize = {}));
const Alert = (props) => {
    const { translateString, translateValue } = useTranslateValue();
    const translatedStrongTitle = translateString(props.strongTitle);
    const translatedTitle = translateValue(props.title);
    const translatedTextOnRight = translateString(props.textOnRight);
    const type = props.type || AlertType.INFO;
    const typeClassNames = {
        [AlertType.DANGER]: {
            text: "text-red-200",
            bg: "bg-red-700",
            hover: "hover:bg-red-600",
        },
        [AlertType.INFO]: {
            text: "text-white",
            bg: "bg-gray-700",
            hover: "hover:bg-gray-600",
        },
        [AlertType.WARNING]: {
            text: "text-yellow-200",
            bg: "bg-gray-700",
            hover: "hover:bg-yellow-600",
        },
        [AlertType.SUCCESS]: {
            text: "text-green-200",
            bg: "bg-gray-700",
            hover: "hover:bg-green-600",
        },
    };
    let textClassName = typeClassNames[type].text;
    const bgClassName = typeClassNames[type].bg;
    const hoverClassName = typeClassNames[type].hover;
    if (props.size === AlertSize.Large) {
        // Add large size classes
        textClassName += " text-lg";
    }
    return (React.createElement("div", { id: props.id, className: `alert rounded-md ${bgClassName} p-4 ${props.className}`, "data-testid": props.dataTestId, onClick: props.onClick, role: "alert", "aria-live": "polite", style: props.color ? { backgroundColor: props.color.toString() } : {} },
        React.createElement("div", { className: "alert-content flex" },
            !props.doNotShowIcon && (React.createElement("div", { className: "alert-icon flex-shrink-0" },
                type === AlertType.DANGER && (React.createElement(Icon, { icon: props.icon || IconProp.Alert, className: `h-5 w-5 ${textClassName}` })),
                type === AlertType.WARNING && (React.createElement(Icon, { icon: props.icon || IconProp.Alert, className: `h-5 w-5 ${textClassName}` })),
                type === AlertType.SUCCESS && (React.createElement(Icon, { icon: props.icon || IconProp.CheckCircle, className: `h-5 w-5 ${textClassName}` })),
                type === AlertType.INFO && (React.createElement(Icon, { icon: props.icon || IconProp.Info, className: `h-5 w-5 ${textClassName}` })))),
            React.createElement("div", { className: `alert-text ml-3 mr-3 flex-1 md:flex md:justify-between ${props.textClassName}` },
                React.createElement("div", { className: `alert-message text-sm flex justify-between w-full ${textClassName}` },
                    React.createElement("div", null,
                        React.createElement("span", { className: "font-medium" },
                            translatedStrongTitle,
                            " ",
                            translatedTitle && translatedStrongTitle ? "- " : ""),
                        translatedTitle),
                    translatedTextOnRight && React.createElement("div", null, translatedTextOnRight)),
                props.onClose && (React.createElement("p", { className: "alert-close mt-3 text-sm md:mt-0 md:ml-6" },
                    React.createElement("button", { onClick: props.onClose, role: "alert-close-button", className: `whitespace-nowrap font-medium ${textClassName} hover:${hoverClassName}` },
                        "Close",
                        React.createElement("span", { "aria-hidden": "true" }, " \u2192"))))))));
};
export default Alert;
//# sourceMappingURL=Alert.js.map