import Button, { ButtonStyleType } from "../Button/Button";
import ButtonType from "../Button/ButtonTypes";
import Icon, { IconType, SizeProp, ThickProp } from "../Icon/Icon";
import Loader, { LoaderType } from "../Loader/Loader";
import ModalBody from "./ModalBody";
import ModalFooter from "./ModalFooter";
import { VeryLightGray } from "../../../Types/BrandColors";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import React, { useEffect, useRef, } from "react";
export var ModalWidth;
(function (ModalWidth) {
    ModalWidth[ModalWidth["Normal"] = 0] = "Normal";
    ModalWidth[ModalWidth["Medium"] = 1] = "Medium";
    ModalWidth[ModalWidth["Large"] = 2] = "Large";
})(ModalWidth || (ModalWidth = {}));
const Modal = (props) => {
    const { translateString } = useTranslateValue();
    const translatedTitle = translateString(props.title) || props.title;
    const translatedDescription = translateString(props.description);
    const translatedSubmitButtonText = translateString(props.submitButtonText);
    const translatedCloseButtonText = translateString(props.closeButtonText);
    const modalRef = useRef(null);
    // Handle Escape key to close modal
    useEffect(() => {
        const handleEscapeKey = (event) => {
            if (event.key === "Escape" && props.onClose) {
                props.onClose();
            }
        };
        document.addEventListener("keydown", handleEscapeKey);
        return () => {
            document.removeEventListener("keydown", handleEscapeKey);
        };
    }, [props.onClose]);
    // Focus trap and initial focus
    useEffect(() => {
        const modal = modalRef.current;
        if (modal) {
            // Focus the first focusable element in the modal, excluding the close button
            const focusableElements = modal.querySelectorAll('button:not([data-testid="close-button"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
            const firstFocusable = focusableElements[0];
            if (firstFocusable) {
                firstFocusable.focus();
            }
        }
    }, []);
    let iconBgColor = "bg-indigo-100";
    let iconColor = "text-indigo-600";
    if (props.iconType === IconType.Info) {
        iconBgColor = "bg-indigo-100";
        iconColor = "text-indigo-600";
    }
    else if (props.iconType === IconType.Warning) {
        iconBgColor = "bg-yellow-100";
        iconColor = "text-yellow-600";
    }
    else if (props.iconType === IconType.Success) {
        iconBgColor = "bg-green-100";
        iconColor = "text-green-600";
    }
    else if (props.iconType === IconType.Danger) {
        iconBgColor = "bg-red-100";
        iconColor = "text-red-600";
    }
    return (React.createElement("div", { ref: modalRef, className: "relative z-20", "aria-labelledby": "modal-title", "aria-describedby": props.description ? "modal-description" : undefined, role: "dialog", "aria-modal": "true" },
        React.createElement("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" }),
        React.createElement("div", { className: "fixed inset-0 z-20 overflow-y-auto" },
            React.createElement("div", { className: "flex min-h-screen items-end justify-center p-0 text-center md:items-center md:p-4" },
                React.createElement("div", { className: `relative transform bg-white text-left shadow-xl transition-all w-full h-full md:rounded-lg md:my-8 ${props.modalWidth && props.modalWidth === ModalWidth.Large
                        ? "md:max-w-7xl"
                        : ""} ${props.modalWidth && props.modalWidth === ModalWidth.Medium
                        ? "md:max-w-3xl"
                        : ""} ${!props.modalWidth ? "md:max-w-lg" : ""} `, "data-testid": "modal" },
                    props.onClose && (React.createElement("div", { className: "absolute top-0 right-0 z-10 pt-4 pr-4 md:hidden lg:block" },
                        React.createElement(Button, { buttonStyle: ButtonStyleType.ICON, icon: IconProp.Close, iconSize: SizeProp.Large, title: "Close", dataTestId: "close-button", onClick: props.onClose }))),
                    React.createElement("div", { className: "p-4 md:p-6" },
                        props.icon && (React.createElement("div", { className: `mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} md:mx-0 md:h-10 md:w-10`, "data-testid": "icon" },
                            React.createElement(Icon, { thick: ThickProp.Thick, type: props.iconType === undefined
                                    ? IconType.Info
                                    : props.iconType, className: `${iconColor} h-6 w-6 stroke-2`, icon: props.icon, size: SizeProp.Large }))),
                        React.createElement("div", { className: "text-left md:mt-0 md:ml-4 md:mr-4" },
                            React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between" },
                                React.createElement("div", { className: "flex-1" },
                                    React.createElement("h3", { "data-testid": "modal-title", className: `text-lg font-medium leading-6 text-gray-900 ${props.icon ? "mt-4 md:ml-10 md:-mt-8 md:mb-5" : ""}`, id: "modal-title" }, translatedTitle),
                                    translatedDescription && (React.createElement("p", { id: "modal-description", "data-testid": "modal-description", className: "text-sm leading-6 text-gray-500 mt-2" }, translatedDescription))),
                                props.rightElement && (React.createElement("div", { "data-testid": "right-element", className: "mt-4 md:mt-0" }, props.rightElement))),
                            React.createElement("div", { className: "mt-2" },
                                React.createElement(ModalBody, { error: props.error }, !props.isBodyLoading ? (props.children) : (React.createElement("div", { className: "modal-body mt-20 mb-20 flex justify-center" },
                                    React.createElement(Loader, { loaderType: LoaderType.Bar, color: VeryLightGray, size: 200 }))))))),
                    React.createElement(ModalFooter, { submitButtonType: props.submitButtonType
                            ? props.submitButtonType
                            : ButtonType.Button, submitButtonStyleType: props.submitButtonStyleType
                            ? props.submitButtonStyleType
                            : ButtonStyleType.PRIMARY, closeButtonStyleType: props.closeButtonStyleType
                            ? props.closeButtonStyleType
                            : ButtonStyleType.NORMAL, submitButtonText: translatedSubmitButtonText
                            ? translatedSubmitButtonText
                            : translateString("Save") || "Save", closeButtonText: translatedCloseButtonText
                            ? translatedCloseButtonText
                            : translateString("Cancel") || "Cancel", onSubmit: props.onSubmit, onClose: props.onClose ? props.onClose : undefined, isLoading: props.isLoading || false, disableSubmitButton: props.isBodyLoading || props.disableSubmitButton, leftFooterElement: props.leftFooterElement }))))));
};
export default Modal;
//# sourceMappingURL=Modal.js.map