Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { startQuiz } from '@app/services/micro-learning';
import { addNotification } from '@app/redux/notification/notification.actions';

import Widget from '@app/components/UI/Widget';
import QuizSimpleQuestion from './quiz-simple-question';
import QuizMultipleQuestion from './quiz-multiple-question';
import SlideProgress from './slide-progress';
import SlideSuccessFeedback from './slide-success-feedback';
import SlideQuizStart from './slide-quiz-start';
import QuizFailureFeedback from './quiz-failure-feedback';

export function SlideQuiz({ quiz, slide, onSync, startUrl, completed }) {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [showQuestions, setShowQuestions] = useState(false);
  const [completedQuiz, setCompletedQuiz] = useState(false);
  const [failureQuiz, setFailureQuiz] = useState(false);
  const [totalPoints, setTotalPoints] = useState(0);
  const [answer, setAnswers] = useState([]);

  const { name, questions, minimum_points_required } = quiz;

  const handleStart = async () => {
    try {
      const start = await startQuiz(startUrl);
      if (start) setShowQuestions(true);
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message });
    }
  };

  const onError = () => {
    setFailureQuiz(true);
  };

  const restartQuiz = () => {
    setCurrentQuestion(0);
    setTotalPoints(0);
    setFailureQuiz(false);
    setCompletedQuiz(false);
    setShowQuestions(false);
  };

  const onSimpleConfirm = (question, answerId) => {
    const answer = question.answers.find((q) => q.uuid === answerId);
    const newAnswer = {
      question: question.uuid,
      answers: [answer]
    };
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer]);

    const isCorrect = answer.correct === 'y';
    isCorrect && setTotalPoints(totalPoints + parseInt(question.points));

    if (currentQuestion !== questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      return;
    }

    if (totalPoints >= parseInt(minimum_points_required)) {
      setCompletedQuiz(true);
    } else {
      onError();
    }
  };

  const onMultipleConfirm = (question, answersIds) => {
    const answers = question.answers.filter((answer) => answersIds.includes(answer.uuid));
    const newAnswer = {
      question: question.uuid,
      answers
    };
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer]);

    const points = answers.reduce((acc, answer) => acc + parseInt(answer.points), 0);

    setTotalPoints(totalPoints + points);

    if (currentQuestion !== questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      return;
    }

    if (totalPoints >= parseInt(minimum_points_required)) {
      setCompletedQuiz(true);
    } else {
      onError();
    }
  };

  if (completedQuiz) {
    return <SlideSuccessFeedback onConfirm={onSync} />;
  }

  if (failureQuiz) {
    return <QuizFailureFeedback onConfirm={restartQuiz} />;
  }

  if (!showQuestions) {
    return <SlideQuizStart onStart={handleStart} completed={completed} slide={slide} />;
  }

  return (
    <Widget>
      <SlideProgress
        points={totalPoints}
        time={quiz.max_time}
        currentQuestion={currentQuestion + 1}
        totalQuestions={questions.length}
        onTimeEnd={onError}
      />

      <Widget.Header title={`Cuestionario sobre: ${name}`} />

      <Widget.Body>
        {questions.map((question, index) => {
          const isLastQuestion = index === questions.length - 1;
          const buttonLabel = isLastQuestion ? 'Finalizar' : 'Siguiente';

          if (question.type === 's') {
            return (
              <QuizSimpleQuestion
                key={question.uuid}
                question={question}
                onConfirm={(answer) => onSimpleConfirm(question, answer)}
                buttonLabel={buttonLabel}
                isCurrent={currentQuestion === index}
              />
            );
          }

          if (question.type === 'm') {
            return (
              <QuizMultipleQuestion
                key={question.uuid}
                question={question}
                onConfirm={(answers) => onMultipleConfirm(question, answers)}
                buttonLabel={buttonLabel}
                isCurrent={currentQuestion === index}
              />
            );
          }

          return null;
        })}
      </Widget.Body>
    </Widget>
  );
}