import { Box, Chip, Tooltip, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import Avatar from '@arcblock/ux/lib/Avatar';
import { useCreation } from 'ahooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UserSessionInfo({
  user,
  sessionUser
}) {
  const currentRole = useCreation(() => {
    return (user?.passports || [])?.find(item => item.name === sessionUser.role);
  }, [user?.passports, sessionUser?.role]);
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      alignItems: 'center',
      gap: 1
    },
    children: [/*#__PURE__*/_jsx(Avatar, {
      size: 40,
      variant: "circle",
      shape: "circle",
      src: sessionUser.avatar,
      did: sessionUser.did,
      sx: {
        flexShrink: 0
      }
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        flex: 1,
        overflow: 'hidden'
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          alignItems: 'center',
          gap: 1
        },
        children: [/*#__PURE__*/_jsx(Tooltip, {
          title: sessionUser.fullName,
          children: /*#__PURE__*/_jsx(Typography, {
            sx: {
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              flex: 1
            },
            children: sessionUser.fullName
          })
        }), /*#__PURE__*/_jsx(Chip, {
          label: currentRole?.title || currentRole?.name || 'Guest',
          size: "small",
          variant: "outlined",
          sx: {
            flexShrink: 0,
            fontWeight: 'bold',
            fontSize: '12px',
            color: 'text.primary',
            borderColor: 'grey.300',
            backgroundColor: 'transparent',
            textTransform: 'capitalize',
            pr: 0.5,
            pl: 0,
            height: 'auto'
          }
        })]
      }), /*#__PURE__*/_jsx(Tooltip, {
        title: sessionUser.email,
        children: /*#__PURE__*/_jsx(Typography, {
          variant: "body2",
          color: "grey",
          sx: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
          },
          children: sessionUser.email
        })
      })]
    })]
  });
}
UserSessionInfo.propTypes = {
  user: PropTypes.object.isRequired,
  sessionUser: PropTypes.shape({
    role: PropTypes.string,
    avatar: PropTypes.string,
    did: PropTypes.string,
    fullName: PropTypes.string,
    email: PropTypes.string
  }).isRequired
};
export default UserSessionInfo;