const startButton = document.getElementById('start-btn')
// const nextButton = document.getElementById('next-btn')
const restartButton = document.getElementById('restart-btn')
const questionContainer = document.getElementById('quiz')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const resultContainer = document.getElementById('result')
const resultText = document.getElementById('result-text')
const scoreElement = document.getElementById('score')
let scoreArray = [];


// !!!!!questionsとresultsの連想配列はそれぞれのページで宣言をする!!!!!!
// さらにshowResultTextの箇所もtotalScoreと結果の数が変動しても使い回せるように、それぞれのページに記述

currentQuestionIndex = 0;
startButton.addEventListener('click', () => {
  startQuiz();
})

function startQuiz() {
  startButton.classList.add('hide')
  resultContainer.classList.add('hide')
  questionContainer.classList.remove('hide')
  showQuestion()
}

function showQuestion() {
  // 連想配列の値をそれぞれ挿入

  // タイトル
  questionElement.innerText = questions[currentQuestionIndex].question;

  // 設問
  questions[currentQuestionIndex].answers.forEach(answer => {
    // ボタンタグを生成して、設問を挿入
    const button = document.createElement('button')
    button.innerText = answer.text;
    const value = answer.value;
    button.dataset.value = value;
    answerButtonsElement.appendChild(button)

    // 選択肢をクリックをする
    button.addEventListener('click', selectAnswer)
  })
}

// 回答の選択
function selectAnswer(e) {
  const selectedButton = e.target;
  // 選択したボタンのvalueを取得
  const scoreData = parseInt(selectedButton.dataset.value);
  // 配列に格納
  scoreArray.push(scoreData);

  if (currentQuestionIndex < questions.length - 1) {
    resetState()
    currentQuestionIndex++
    // console.log(currentQuestionIndex);
    // console.log(scoreArray)
    // nextButton.classList.remove('hide');
    showQuestion()
  } else {
    showResult();
  }
}

function resetState() {
  // https://into-the-program.com/removechild/
  // これで子要素をすべて削除
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

// 結果の表示
function showResult() {

  console.log(scoreArray)

  questionContainer.classList.add('hide');
  resultContainer.classList.remove('hide');

  // 下記のコメントアウトの部分をshowResuktText()として、それぞれのページで記述する
  // 配列の数値を合算。
  // const totalScore = scoreArray.reduce(function (sum, currentValue) {
  //   return sum + parseInt(currentValue);
  // }, 0);
  // for (let i = 0; i < results.length; i++) {
  //   const result = results[i];
  //   if (totalScore <= 3 && i === 0) {
  //     scoreElement.innerText = result.text + totalScore;
  //     break;
  //   } else if (totalScore < 6 && i === 1) {
  //     scoreElement.innerText = result.text + totalScore;
  //     break;
  //   } else if (i === 2) {
  //     scoreElement.innerText = result.text + totalScore;
  //     break;
  //   }
  // }

  // showResultTextのfunctionを、それぞれのhtmlの箇所で記述をする。
  showResultText();
}


// もう一度診断するのボタンをクリック
restartButton.addEventListener('click', () => {
  resultContainer.classList.add('hide')
  startButton.classList.remove('hide')
  currentQuestionIndex = 0;
  scoreArray = [];
  resetState()
})