import Icon from "../Icon/Icon";
import ButtonType from "./ButtonTypes";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import React, { useEffect } from "react";
import Tooltip from "../Tooltip/Tooltip";
export var ButtonStyleType;
(function (ButtonStyleType) {
    ButtonStyleType[ButtonStyleType["PRIMARY"] = 0] = "PRIMARY";
    ButtonStyleType[ButtonStyleType["SECONDARY"] = 1] = "SECONDARY";
    ButtonStyleType[ButtonStyleType["OUTLINE"] = 2] = "OUTLINE";
    ButtonStyleType[ButtonStyleType["NORMAL"] = 3] = "NORMAL";
    ButtonStyleType[ButtonStyleType["DANGER"] = 4] = "DANGER";
    ButtonStyleType[ButtonStyleType["DANGER_OUTLINE"] = 5] = "DANGER_OUTLINE";
    ButtonStyleType[ButtonStyleType["SUCCESS"] = 6] = "SUCCESS";
    ButtonStyleType[ButtonStyleType["SUCCESS_OUTLINE"] = 7] = "SUCCESS_OUTLINE";
    ButtonStyleType[ButtonStyleType["WARNING"] = 8] = "WARNING";
    ButtonStyleType[ButtonStyleType["WARNING_OUTLINE"] = 9] = "WARNING_OUTLINE";
    ButtonStyleType[ButtonStyleType["ICON_LIGHT"] = 10] = "ICON_LIGHT";
    ButtonStyleType[ButtonStyleType["LINK"] = 11] = "LINK";
    ButtonStyleType[ButtonStyleType["SECONDARY_LINK"] = 12] = "SECONDARY_LINK";
    ButtonStyleType[ButtonStyleType["ICON"] = 13] = "ICON";
    ButtonStyleType[ButtonStyleType["HOVER_DANGER_OUTLINE"] = 14] = "HOVER_DANGER_OUTLINE";
    ButtonStyleType[ButtonStyleType["HOVER_SUCCESS_OUTLINE"] = 15] = "HOVER_SUCCESS_OUTLINE";
    ButtonStyleType[ButtonStyleType["HOVER_PRIMARY_OUTLINE"] = 16] = "HOVER_PRIMARY_OUTLINE";
})(ButtonStyleType || (ButtonStyleType = {}));
export var ButtonSize;
(function (ButtonSize) {
    ButtonSize["Normal"] = "px-3 py-2";
    ButtonSize["Small"] = "px-2 py-1";
    ButtonSize["Large"] = "px-4 py-2";
    ButtonSize["ExtraSmall"] = "px-0 py-0";
})(ButtonSize || (ButtonSize = {}));
const Button = ({ title, onClick, disabled, id, shortcutKey, type = ButtonType.Button, isLoading = false, style, icon, iconSize, buttonStyle = ButtonStyleType.NORMAL, buttonSize = ButtonSize.Normal, dataTestId, className, tooltip, ariaLabel, ariaExpanded, ariaHaspopup, ariaControls, }) => {
    const { translateString } = useTranslateValue();
    const translatedTitle = translateString(title);
    const translatedTooltip = translateString(tooltip);
    useEffect(() => {
        // componentDidMount
        if (shortcutKey) {
            window.addEventListener(`keydown`, (e) => {
                return handleKeyboard(e);
            });
        }
        // componentDidUnmount
        return () => {
            if (shortcutKey) {
                window.removeEventListener(`keydown`, (e) => {
                    return handleKeyboard(e);
                });
            }
        };
    });
    const handleKeyboard = (event) => {
        if (event.target instanceof HTMLBodyElement && event.key && shortcutKey) {
            switch (event.key) {
                case shortcutKey.toUpperCase():
                case shortcutKey.toLowerCase():
                    if (onClick) {
                        onClick();
                    }
                    return;
                default:
                    return;
            }
        }
    };
    let buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
    let loadingIconClassName = `w-5 h-5 mr-3 -ml-1 mr-1 animate-spin`;
    let iconClassName = `w-5 h-5`;
    if (buttonStyle !== ButtonStyleType.ICON &&
        buttonStyle !== ButtonStyleType.ICON_LIGHT) {
        iconClassName += ` mr-1`;
    }
    else {
        iconClassName += ` m-1`;
    }
    if (buttonStyle === ButtonStyleType.LINK) {
        buttonStyleCssClass = `text-indigo-600 hover:text-indigo-900  space-x-2`;
        if (icon) {
            buttonStyleCssClass += ` flex`;
        }
    }
    if (buttonStyle === ButtonStyleType.SECONDARY_LINK) {
        buttonStyleCssClass = `text-sm text-gray-400 hover:text-gray-500 space-x-2`;
        if (icon) {
            buttonStyleCssClass += ` flex`;
        }
    }
    if (buttonStyle === ButtonStyleType.DANGER) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${disabled ? "hover:bg-red-700" : ""} focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
    }
    if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${disabled ? "hover:bg-red-50" : ""} focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
    }
    if (buttonStyle === ButtonStyleType.PRIMARY) {
        loadingIconClassName += ` text-indigo-100`;
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 text-base font-medium text-white shadow-sm ${disabled ? "hover:bg-indigo-700" : ""} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
        if (disabled) {
            buttonStyleCssClass += ` bg-indigo-300`;
        }
    }
    if (buttonStyle === ButtonStyleType.SECONDARY) {
        loadingIconClassName += ` text-indigo-500`;
        buttonStyleCssClass = `inline-flex items-center rounded-md border border-transparent bg-indigo-100 text-sm font-medium text-indigo-700 ${disabled ? "hover:bg-indigo-200" : ""} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
        if (disabled) {
            buttonStyleCssClass += ` bg-indigo-300`;
        }
    }
    if (buttonStyle === ButtonStyleType.ICON_LIGHT) {
        buttonStyleCssClass = `rounded-md bg-white text-gray-400 ${disabled ? "hover:text-gray-500" : ""}  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
    }
    if (buttonStyle === ButtonStyleType.ICON) {
        buttonStyleCssClass = `rounded-md bg-transparent text-gray-600 ${disabled ? "hover:text-gray-900" : ""}  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
    }
    if (buttonStyle === ButtonStyleType.OUTLINE ||
        buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE ||
        buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE ||
        buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE) {
        buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover md:text-sm ml-1`;
        if (buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE) {
            buttonStyleCssClass += ` hover:text-red-500`;
        }
        if (buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE) {
            buttonStyleCssClass += ` hover:text-green-500`;
        }
        if (buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE) {
            buttonStyleCssClass += ` hover:text-indigo-500`;
        }
    }
    if (buttonStyle === ButtonStyleType.SUCCESS) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${disabled ? "hover:bg-green-700" : ""}  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
    }
    if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${disabled ? "hover:bg-green-50" : ""}  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
    }
    if (buttonStyle === ButtonStyleType.WARNING) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${disabled ? "hover:bg-yellow-700" : ""}  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
    }
    if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
        buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${disabled ? "hover:bg-yellow-50" : ""}   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
    }
    buttonStyleCssClass += ` ` + buttonSize;
    if (className) {
        buttonStyleCssClass += ` ` + className;
    }
    // For icon-only buttons, use title as aria-label for accessibility
    const computedAriaLabel = ariaLabel ||
        (buttonStyle === ButtonStyleType.ICON ||
            buttonStyle === ButtonStyleType.ICON_LIGHT
            ? translatedTitle || translatedTooltip
            : undefined);
    const getButton = () => {
        return (React.createElement("button", { style: style, id: id, onClick: () => {
                if (onClick) {
                    onClick();
                }
            }, "data-testid": dataTestId, type: type, disabled: disabled || isLoading, className: buttonStyleCssClass, "aria-label": computedAriaLabel, "aria-disabled": disabled || isLoading, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-controls": ariaControls },
            isLoading && buttonStyle !== ButtonStyleType.ICON && (React.createElement(Icon, { icon: IconProp.Spinner, className: loadingIconClassName })),
            !isLoading && icon && (React.createElement(Icon, { icon: icon, className: iconClassName, size: iconSize || undefined })),
            translatedTitle && buttonStyle !== ButtonStyleType.ICON
                ? translatedTitle
                : ``,
            shortcutKey && (React.createElement("div", { className: "ml-2" },
                React.createElement("kbd", { className: "inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-400" }, shortcutKey)))));
    };
    if (translatedTooltip) {
        return React.createElement(Tooltip, { text: translatedTooltip }, getButton());
    }
    return getButton();
};
export default Button;
//# sourceMappingURL=Button.js.map