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

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

import {
  type Question,
  QuestionType,
} from 'src/pages/dashboard/learning/courses/types';

import {
  MultipleChoiceInput,
  TextChoiceInput,
  UniqueChoiceInput,
} from '../inputs';
import QuestionImage from '../QuestionImage';

type QuestionCardProps = {
  question: Question;
  index: number;
};

const QuestionCard = ({ question, index }: QuestionCardProps) => {
  return (
    <CardContainer fullWidth>
      <Stack sx={{ gap: 1.5 }}>
        <Title
          title={`${index + 1}. ${question.title}`}
          description={question.description}
          variant="S"
        />
        {question.attachments?.map(
          attachment =>
            attachment.url && (
              <QuestionImage
                key={attachment.id}
                src={attachment.url}
              />
            ),
        )}
        {question.type === QuestionType.MULTIPLE_CHOICE && (
          <UniqueChoiceInput
            choices={question.choices ?? []}
            questionIndex={index}
          />
        )}
        {question.type === QuestionType.CHECKBOX && (
          <MultipleChoiceInput
            choices={question.choices ?? []}
            questionIndex={index}
          />
        )}
        {question.type === QuestionType.TEXT && (
          <TextChoiceInput questionIndex={index} />
        )}
      </Stack>
    </CardContainer>
  );
};

export default QuestionCard;
