// @mui
import { styled } from '@mui/material/styles';
import { Box, Link, Typography, Avatar } from '@mui/material';
import useAuth from '../../../hooks/useAuth';

// ----------------------------------------------------------------------

const RootStyle = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(2, 2.5),
  borderRadius: Number(theme.shape.borderRadius) * 1.5,
  backgroundColor: theme.palette.grey[500_12],
  transition: theme.transitions.create('opacity', {
    duration: theme.transitions.duration.shorter,
  }),
}));

// ----------------------------------------------------------------------

type Props = {
  isCollapse: boolean | undefined;
};

export default function NavbarAccount({ isCollapse }: Props) {
  
  const { user } = useAuth();

  console.log('current user is ', user)
  return (
    <Link underline="none" color="inherit">
      <RootStyle
        sx={{
          ...(isCollapse && {
            bgcolor: 'transparent',
          }),
        }}
      >
        {user && user.user.avatar_url && (<Avatar
          src={user ? user.user.avatar_url : ''}
          alt={user ? user.user.full_name : ''}
        />)}

        <Box
          sx={{
            ml: 2,
            transition: (theme) =>
              theme.transitions.create('width', {
                duration: theme.transitions.duration.shorter,
              }),
            ...(isCollapse && {
              ml: 0,
              width: 0,
            }),
          }}
        >
          <Typography variant="subtitle2" noWrap>
            { user ? user.user.full_name ?? 'Hi, ' : 'Hi, '}
          </Typography>
          <Typography variant="body2" noWrap sx={{ color: 'text.secondary', fontSize: '11px' }}>
            { user ? user.user.email : 'Please Wait'}
          </Typography>
        </Box>
      </RootStyle>
    </Link>
  );
}