// Question Types
// 1. MCQs | Multiple Choice | single
const quiz = {
  topic: 'Javascript',
  level: 'Beginner',
  totalQuestions: 10,
  perQuestionScore: 5,
  totalTime: 60, // in seconds
  questions: [
    {
      question:
        'Which function is used to serialize an object into a JSON string in Javascript?',
      choices: ['stringify()', 'parse()', 'convert()', 'None of the above'],
      type: 'MCQs',
      correctAnswer: 'stringify()',
    },
    {
      question:
        'Which of the following keywords is used to define a variable in Javascript?',
      choices: ['var', 'let', 'var and let', 'None of the above'],
      type: 'MCQs',
      correctAnswer: 'var and let',
    },
    {
      question:
        'Which of the following methods can be used to display data in some form using Javascript?',
      choices: [
        'document.write()',
        'console.log()',
        'window.alert',
        'All of the above',
      ],
      type: 'MCQs',
      correctAnswer: 'All of the above',
    },
    {
      question: 'How can a datatype be declared to be a constant type?',
      choices: ['const', 'var', 'let', 'constant'],
      type: 'MCQs',
      correctAnswer: 'const',
    },
  ],
}

const Timer = () => (
  <svg
    width="34"
    height="34"
    viewBox="0 0 44 44"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M21.9999 41.7083C12.3933 41.7083 4.58325 33.8983 4.58325 24.2917C4.58325 14.685 12.3933 6.875 21.9999 6.875C31.6066 6.875 39.4166 14.685 39.4166 24.2917C39.4166 33.8983 31.6066 41.7083 21.9999 41.7083ZM21.9999 9.625C13.9149 9.625 7.33325 16.2067 7.33325 24.2917C7.33325 32.3767 13.9149 38.9583 21.9999 38.9583C30.0849 38.9583 36.6666 32.3767 36.6666 24.2917C36.6666 16.2067 30.0849 9.625 21.9999 9.625Z"
      fill="#800080"
    />
    <path
      d="M22 25.2084C21.2483 25.2084 20.625 24.5851 20.625 23.8334V14.6667C20.625 13.9151 21.2483 13.2917 22 13.2917C22.7517 13.2917 23.375 13.9151 23.375 14.6667V23.8334C23.375 24.5851 22.7517 25.2084 22 25.2084Z"
      fill="#800080"
    />
    <path
      d="M27.5 5.04175H16.5C15.7483 5.04175 15.125 4.41841 15.125 3.66675C15.125 2.91508 15.7483 2.29175 16.5 2.29175H27.5C28.2517 2.29175 28.875 2.91508 28.875 3.66675C28.875 4.41841 28.2517 5.04175 27.5 5.04175Z"
      fill="#800080"
    />
  </svg>
)

const SevenSecondQuiz = () => {
  const [activeQuestion, setActiveQuestion] = React.useState(0)
  const [selectedAnswer, setSelectedAnswer] = React.useState('')
  const [showResult, setShowResult] = React.useState(false)
  const [selectedAnswerIndex, setSelectedAnswerIndex] = React.useState(null)
  const [result, setResult] = React.useState({
    score: 0,
    correctAnswers: 0,
    wrongAnswers: 0,
  })

  const { questions } = quiz
  const { question, choices, correctAnswer } = questions[activeQuestion]

  const onClickNext = () => {
    setSelectedAnswerIndex(null)
    setResult((prev) =>
      selectedAnswer
        ? {
            ...prev,
            score: prev.score + 5,
            correctAnswers: prev.correctAnswers + 1,
          }
        : { ...prev, wrongAnswers: prev.wrongAnswers + 1 }
    )
    if (activeQuestion !== questions.length - 1) {
      setActiveQuestion((prev) => prev + 1)
    } else {
      setActiveQuestion(0)
      setShowResult(true)
    }
  }

  const onAnswerSelected = (answer, index) => {
    setSelectedAnswerIndex(index)
    if (answer === correctAnswer) {
      setSelectedAnswer(true)
    } else {
      setSelectedAnswer(false)
    }
  }

  const addLeadingZero = (number) => (number > 9 ? number : `0${number}`)

  return (
    <div className="quiz-container">
      {!showResult ? (
        <div>
         <div className="flx-end">
            <div>
              <span className="active-question-no">
                {addLeadingZero(activeQuestion + 1)}
              </span>
              <span className="total-question">
                /{addLeadingZero(questions.length)}
              </span>
            </div>
            <div className="timer">
              <Timer />
              <span>00:07</span>
            </div>
          </div>
          <h2>{question}</h2>
          <ul>
            {choices.map((answer, index) => (
              <li
                onClick={() => onAnswerSelected(answer, index)}
                key={answer}
                className={
                  selectedAnswerIndex === index ? 'selected-answer' : null
                }
              >
                {answer}
              </li>
            ))}
          </ul>
          <div className="flex-right">
            <button
              onClick={onClickNext}
              disabled={selectedAnswerIndex === null}
            >
              {activeQuestion === questions.length - 1 ? 'Finish' : 'Next'}
            </button>
          </div>
        </div>
      ) : (
        <div className="result">
          <h3>Result</h3>
          <p>
            Total Question: <span>{questions.length}</span>
          </p>
          <p>
            Total Score:<span> {result.score}</span>
          </p>
          <p>
            Correct Answers:<span> {result.correctAnswers}</span>
          </p>
          <p>
            Wrong Answers:<span> {result.wrongAnswers}</span>
          </p>
        </div>
      )}
    </div>
  )
}


ReactDOM.render(<SevenSecondQuiz />, document.getElementById('root'));