import Stack from '@material-hu/mui/Stack';

import HuAlert from '@material-hu/components/design-system/Alert';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';

import {
  type EvaluationTask,
  QuestionType,
  TaskStatus,
} from 'src/pages/dashboard/learning/courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import QuestionImage from '../QuestionImage';

import MultipleChoiceAnswer from './MultipleChoiceAnswer';
import TextAnswer from './TextAnswer';
import UniqueChoiceAnswer from './UniqueChoiceAnswer';

type TaskEvaluationAnswersProps = {
  task: EvaluationTask | undefined;
};

const TaskEvaluationAnswers = ({ task }: TaskEvaluationAnswersProps) => {
  const { t } = useLokaliseTranslation('learning');

  if (!task) return null;

  const { showCorrectAnswers, status, answers } = task;

  const answersLength = answers?.length || 0;
  const showAnswers =
    showCorrectAnswers && answersLength > 0 && status !== TaskStatus.FAILED;

  if (!showAnswers) return null;

  return (
    <>
      {answers?.map((answer, index) => (
        <CardContainer
          key={answer.id}
          fullWidth
        >
          <Stack sx={{ gap: 1.5 }}>
            <Title
              title={`${index + 1}. ${answer.title}`}
              variant="S"
            />
            {answer.attachments?.map(
              attachment =>
                attachment.url && (
                  <QuestionImage
                    key={attachment.id}
                    src={attachment.url}
                  />
                ),
            )}
            {answer.type === QuestionType.TEXT && (
              <TextAnswer answer={answer} />
            )}
            {answer.type === QuestionType.MULTIPLE_CHOICE && (
              <UniqueChoiceAnswer answer={answer} />
            )}
            {answer.type === QuestionType.CHECKBOX && (
              <MultipleChoiceAnswer answer={answer} />
            )}
            {answer.explanation && (
              <HuAlert
                title={t('course.lesson.answer_explanation')}
                description={answer.explanation}
                severity="highlight"
              />
            )}
          </Stack>
        </CardContainer>
      ))}
    </>
  );
};

export default TaskEvaluationAnswers;
