import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import Typography from '@material-hu/mui/Typography';

import { CorrectAnswer } from 'src/types/onboarding';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { sortByPosition } from 'src/utils/position';

import {
  GetFormInputComponent,
  GetFormInputComponentProps,
} from 'src/components/dashboard/form/formDetail/GetFormInputComponent';
import GetAnswerInputComponent from 'src/components/quiz/GetAnswerInputComponent';

export type QuestionCardProps = GetFormInputComponentProps & {
  name: string;
  description?: string;
  points: number | null;
  userAnswerIsCorrect: boolean | null;
  correctAnswer?: CorrectAnswer | null;
};

export const QuestionCard: FC<QuestionCardProps> = props => {
  const {
    description,
    required,
    points,
    userAnswerIsCorrect,
    correctAnswer,
    ...inputProps
  } = props;

  const { t } = useLokaliseTranslation('onboarding');

  return (
    <Card sx={{ width: '100%', p: 2, my: 2 }}>
      <Box sx={{ mb: 2 }}>
        <Typography
          variant="body1"
          fontWeight="bold"
          color="primary.main"
        >
          {description}
          {required && (
            <Typography
              color="error"
              display="inline"
            >
              {t('required')}
            </Typography>
          )}
        </Typography>
        {points && (
          <Typography variant="body2">
            {t('points', { count: points })}
          </Typography>
        )}
        {typeof userAnswerIsCorrect === 'boolean' && (
          <Typography
            variant="body2"
            color={userAnswerIsCorrect ? 'success.main' : 'error.main'}
            fontWeight="bold"
          >
            {userAnswerIsCorrect ? t('correct_answer') : t('incorrect_answer')}
          </Typography>
        )}
      </Box>
      <GetFormInputComponent
        required={required}
        {...inputProps}
      />
      {typeof userAnswerIsCorrect === 'boolean' && !userAnswerIsCorrect && (
        <Box sx={{ mt: 2 }}>
          <Typography
            variant="body2"
            color="secondary"
            fontWeight="bold"
            sx={{ mb: 1 }}
          >
            {correctAnswer?.correctChoices &&
            correctAnswer?.correctChoices.length > 1
              ? t('correct_answers_feedback')
              : t('correct_answer_feedback')}
          </Typography>

          {sortByPosition(correctAnswer?.correctChoices || []).map(
            (item, index) => (
              <GetAnswerInputComponent
                key={index}
                correctAnswer={item.description}
                inputType={inputProps.inputType}
                multipleAnswer={inputProps.multipleAnswer}
              />
            ),
          )}

          {correctAnswer?.explanation && (
            <Box sx={{ p: 2, backgroundColor: '#f5f5f5', mt: 2 }}>
              <Typography
                variant="body2"
                fontWeight="bold"
                sx={{ mb: 2 }}
              >
                {t('answer_explanation')}
              </Typography>
              <Typography
                fontStyle="italic"
                sx={{ fontSize: '0.85rem', whiteSpace: 'pre-line' }}
              >
                {correctAnswer?.explanation}
              </Typography>
            </Box>
          )}
        </Box>
      )}
    </Card>
  );
};

export default QuestionCard;