import { useNavigate } from 'react-router-dom';

import { IconLogout } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import HuTitle from '@material-hu/components/design-system/Title';

import useAuth from 'src/contexts/JWTContext';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname, getInitials } from 'src/utils/userUtils';

const AccountPopoverContent = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('authentication');
  const { enqueueSnackbar } = useHuSnackbar();
  const theme = useTheme();

  const handleLogout = async () => {
    try {
      await logout?.(true);
      navigate('/');
    } catch (err) {
      enqueueSnackbar({
        title: 'Error',
        variant: 'error',
      });
    }
  };

  const userFullName = getFullname(user || {});

  return (
    <Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          borderBottom: `1px solid ${theme.palette?.border?.neutralBorder}`,
          p: 2,
        }}
      >
        <HuAvatar
          src={user?.profilePicture || undefined}
          alt={''}
          text={getInitials(userFullName)}
          badgeProps={{
            color: 'success',
          }}
          withBadge
        />
        <HuTitle
          title={userFullName}
          description={user?.email}
          variant="S"
        />
      </Stack>
      <Stack sx={{ p: 2 }}>
        <Button
          fullWidth
          onClick={handleLogout}
          startIcon={<IconLogout />}
        >
          {t('LOGOUT')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default AccountPopoverContent;