import React, { useState } from "react";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
export var ToastType;
(function (ToastType) {
    ToastType[ToastType["DANGER"] = 0] = "DANGER";
    ToastType[ToastType["SUCCESS"] = 1] = "SUCCESS";
    ToastType[ToastType["INFO"] = 2] = "INFO";
    ToastType[ToastType["WARNING"] = 3] = "WARNING";
    ToastType[ToastType["NORMAL"] = 4] = "NORMAL";
})(ToastType || (ToastType = {}));
const Component = (props) => {
    const { translateString } = useTranslateValue();
    const [show, setShow] = useState(true);
    let typeCssClass = "text-gray-400";
    let iconType = IconProp.Info;
    if (props.type === ToastType.NORMAL) {
        typeCssClass = "text-gray-400";
        iconType = IconProp.Info;
    }
    if (props.type === ToastType.DANGER) {
        typeCssClass = "text-red-400";
        iconType = IconProp.Error;
    }
    if (props.type === ToastType.WARNING) {
        typeCssClass = "text-yellow-400";
        iconType = IconProp.Alert;
    }
    if (props.type === ToastType.SUCCESS) {
        typeCssClass = "text-green-400";
        iconType = IconProp.CheckCircle;
    }
    if (props.type === ToastType.INFO) {
        typeCssClass = "text-blue-400";
        iconType = IconProp.Info;
    }
    if (props.icon) {
        iconType = props.icon;
    }
    let top = 0;
    if (props.index) {
        top = props.index * 16; // move the second item lower than the first one. 16 is the height of the toast.
    }
    if (show) {
        return (React.createElement("div", { "data-testid": "toast", "aria-live": "assertive", className: `pointer-events-none fixed z-40 top-${top} left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6` },
            React.createElement("div", { className: "flex w-full flex-col items-center space-y-4 sm:items-end" },
                React.createElement("div", { className: "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" },
                    React.createElement("div", { className: "p-4" },
                        React.createElement("div", { className: "flex items-start" },
                            React.createElement("div", { className: "flex-shrink-0" },
                                React.createElement(Icon, { className: `h-6 w-6 ${typeCssClass}`, "data-testid": "toast-icon", icon: iconType })),
                            React.createElement("div", { className: "ml-3 w-0 flex-1 pt-0.5" },
                                React.createElement("p", { "data-testid": "title", className: "text-sm font-medium text-gray-900" }, translateString(props.title)),
                                React.createElement("p", { "data-testid": "description", className: "mt-1 text-sm text-gray-500" }, translateString(props.description))),
                            React.createElement("div", { className: "ml-4 flex flex-shrink-0" },
                                React.createElement("button", { onClick: () => {
                                        setShow(false);
                                        if (props.onClose) {
                                            props.onClose();
                                        }
                                    }, "data-testid": "close-button", type: "button", className: "inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" },
                                    React.createElement("span", { className: "sr-only" }, "Close"),
                                    React.createElement(Icon, { className: `h-5 w-5`, icon: IconProp.Close })))))))));
    }
    return React.createElement(React.Fragment, null);
};
export default Component;
//# sourceMappingURL=Toast.js.map