import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import { useAuth } from 'src/contexts/JWTContext';
import { BUNNY_IMAGE_CLASSES } from 'src/pages/dashboard/Conversations/constants';
import { type UserReactionInfo } from 'src/pages/dashboard/Conversations/types';
import { compareIds } from 'src/pages/dashboard/Conversations/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getInitials } from 'src/utils/userUtils';

import LazySecureImage from '../../../shared/LazySecureImage';

const ReactionItem = ({ user }: { user: UserReactionInfo }) => {
  const theme = useTheme();
  const { user: loggedUser } = useAuth();
  const { t } = useLokaliseTranslation('chat');
  const getUserText = () => {
    if (compareIds(user.id, loggedUser?.id)) {
      return `${user.name} (${t('you')})`;
    }
    return user.name;
  };

  return (
    <HuMenuItem
      key={`${user.id}-${user.emoji}`}
      sx={{
        pointerEvents: 'none',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          width: '100%',
          justifyContent: 'space-between',
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <LazySecureImage
            url={user.picture}
            isAvatar
            imageClass={BUNNY_IMAGE_CLASSES.AVATAR}
            avatarProps={{
              text: getInitials(user.name || ''),
            }}
          />
          <Stack>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
              sx={{ color: theme.palette.new.text.neutral.default }}
            >
              {getUserText()}
            </Typography>
          </Stack>
        </Stack>
      </Stack>
    </HuMenuItem>
  );
};

export default ReactionItem;
