import useTranslateValue from "../../Utils/Translation";
import React from "react";
export var TabType;
(function (TabType) {
    TabType["Error"] = "error";
    TabType["Warning"] = "warning";
    TabType["Info"] = "info";
    TabType["Success"] = "success";
})(TabType || (TabType = {}));
const TabElement = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const translatedName = (_a = translateString(props.tab.name)) !== null && _a !== void 0 ? _a : props.tab.name;
    const backgroundColor = "bg-gray-100";
    const baseClasses = "rounded-md px-3 py-2 text-sm font-medium cursor-pointer inline-flex whitespace-nowrap flex-shrink-0";
    const stateClasses = props.isSelected
        ? `${backgroundColor} text-gray-700`
        : "text-gray-500 hover:text-gray-700";
    const handleKeyDown = (event) => {
        var _a;
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
        }
    };
    return (React.createElement("div", { className: "mt-3 mb-3" },
        React.createElement("div", { id: `tab-${props.tab.name}`, "data-testid": `tab-${props.tab.name}`, key: props.tab.name, onClick: props.onClick, onKeyDown: handleKeyDown, className: `${stateClasses} ${baseClasses}`, role: "tab", tabIndex: props.isSelected ? 0 : -1, "aria-selected": props.isSelected, "aria-controls": props.tabPanelId },
            React.createElement("div", null, translatedName),
            props.tab.countBadge && props.tab.countBadge > 0 ? (React.createElement("span", { className: `${props.tab.tabType === TabType.Error
                    ? "bg-red-500"
                    : props.tab.tabType === TabType.Warning
                        ? "bg-yellow-500"
                        : props.tab.tabType === TabType.Info
                            ? "bg-indigo-500"
                            : props.tab.tabType === TabType.Success
                                ? "bg-green-500"
                                : "bg-gray-500"} text-white rounded-full px-2 py-1 text-xs font-semibold ml-2 -mt-0.5` }, props.tab.countBadge)) : null)));
};
export default TabElement;
//# sourceMappingURL=Tab.js.map