import { Grid, Typography } from '@mui/material';
import UserAvatar from '../UserAvatar';

const intl = {
  es: {
    peerAssessment: 'Evaluación por compañera',
    coachAssessment: 'Evaluación por coach',
  },
  en: {
    peerAssessment: 'Peer assessment',
    coachAssessment: 'Coach assessment',
  },
  pt: {
    peerAssessment: 'Avaliação por colega',
    coachAssessment: 'Avaliação por coach',
  },
};

const WrittenFeedback = ({ lang, projectAssessments }) => (
  <>
    {projectAssessments
      .filter(({ data: { type } }) => type !== 'self')
      .map(({ id, createdAt, author, data: { comments, type } }) => (
        <Grid container key={id} sx={{ mb: 3 }}>
          <Grid item xs={4} sm={3} md={2}>
            <UserAvatar user={author} size="md" />
          </Grid>
          <Grid item xs={8} sm={9} md={10} sx={{ position: 'relative' }}>
            <Typography variant="subtitle">
              {type === 'peer'
                ? intl[lang].peerAssessment
                : intl[lang].coachAssessment}
            </Typography>
            <Typography variant="h4" sx={{ mt: 0 }}>{author.fullName}</Typography>
            <Typography sx={{ position: 'absolute', top: 0, right: 0 }}>
              {createdAt.toLocaleDateString(lang)}
            </Typography>
          </Grid>
          <Grid item xs={4} sm={3} md={2}></Grid>
          <Grid item xs={8} sm={9} md={10}>
            <Typography>
              {comments}
            </Typography>
          </Grid>
        </Grid>
      ))}
  </>
);

export default WrittenFeedback;