import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./style.scss";
import { getInitials } from "../../utils";
import { BadgeNonClickable, EllipsisText, IconButton, Loader } from "..";
const RenderAddOrRemoveButton = ({ isAdmin = false, isLoading = false, iconType = "plus", onClick, dataCy, }) => {
    if (isAdmin) {
        return null;
    }
    else if (isLoading) {
        return _jsx(Loader, { height: "36", width: "36" });
    }
    return (_jsx(IconButton, { shape: "circular", color: "gray", variant: "tertiary", iconType: iconType, onClick: onClick, sizeVariant: "xs", "data-cy": `${dataCy}-${iconType.toLowerCase()}` }));
};
const AssignmentCreation = ({ assigneeName, assigneeMail, iconType = "plus", isLoading = false, isAdmin = false, onClick, dataCy, }) => {
    const invalidName = !assigneeName || !assigneeName.trim();
    return (_jsxs("div", { className: `assignmentCreation ${iconType}`, children: [_jsx("div", { className: "addTribeMemberCard--Initials", children: invalidName ? "U" : getInitials(assigneeName).toUpperCase() }), _jsxs("span", { className: "addTribeMemberCard--TextAndButton", children: [_jsxs("span", { className: "addTribeMemberCard--Details", children: [_jsx("span", { className: "addTribeMemberCard--Name", children: _jsx(EllipsisText, { maxWidth: "100%", children: assigneeName }) }), _jsx("span", { className: "addTribeMemberCard--Mail", children: _jsx(EllipsisText, { maxWidth: "100%", children: assigneeMail }) }), isAdmin && (_jsx(BadgeNonClickable, { showIcon: false, text: "Owner", variant: "neutral" }))] }), RenderAddOrRemoveButton({
                        iconType,
                        isAdmin,
                        isLoading,
                        onClick,
                        dataCy,
                    })] })] }));
};
export default AssignmentCreation;
