import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Typography } from '../Typography';
import { PROFILE_POPOVER_ID, profileClassnames } from './constants';
import { MenuList } from './MenuList';
import { ProfileSkeleton } from './ProfileSkeleton';
import { Credentials, ProfileRoot, StyledAvatar, StyledChevron, User, } from './styles';
import { useLogic } from './useLogic';
export const Profile = (props) => {
    const { displayName, annotation, avatar = {}, menu: Menu, menuList, exitButton, isLoading, } = props;
    const { open, anchorRef, handleOpenMenu, handleCloseMenu, hidePersonalDataClassname, } = useLogic(props);
    if (isLoading) {
        return _jsx(ProfileSkeleton, {});
    }
    return (_jsxs(_Fragment, { children: [_jsxs(ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, className: profileClassnames.button, children: [_jsx(StyledAvatar, { ...avatar, className: profileClassnames.avatar }), _jsxs(User, { className: profileClassnames.user, children: [_jsxs(Credentials, { className: hidePersonalDataClassname, children: [_jsx(Typography, { variant: "body1", className: profileClassnames.credentials, children: displayName }), _jsx(Typography, { variant: "caption", color: "textSecondary", className: profileClassnames.credentials, children: annotation })] }), _jsx(StyledChevron, { isActive: open })] })] }), Menu ? (_jsx(Menu, { MenuListProps: { id: PROFILE_POPOVER_ID }, open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'right',
                }, transformOrigin: {
                    vertical: 'top',
                    horizontal: 'right',
                }, PaperProps: {
                    style: {
                        maxWidth: 300,
                        minWidth: 200,
                    },
                } })) : (_jsx(MenuList, { open: open, anchorEl: anchorRef.current, menuList: menuList, displayName: displayName, annotation: annotation, exitButton: exitButton, onClose: handleCloseMenu, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'right',
                }, transformOrigin: {
                    vertical: 'top',
                    horizontal: 'right',
                } }))] }));
};
