var currentTab = 0; // Current tab is set to be the first tab (0)
let inputs = []

let eye2 = 0;
var speed = 15;
var text = "";

const content = document.getElementById("content");

var socket = io.connect();

let responses = []
let questionNumber = 0
let quizID = localStorage.getItem("myID");

window.addEventListener('load', function () {

  showTab(currentTab); // Display the current tab

  let testString = "qustion| answer1| answer2| asnwer3| answer4| correct" //test
  // document.getElementById("testButton").addEventListener('click', function test() {
  //   displayQuestions(testString)
  // }) //test
})


function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block"; //?
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !collectResponses()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  console.log("tab is: " + currentTab)
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:


    // do we need to send an ID here?
    let dataToSend = {'user': quizID, 'responses': responses}

    for (let i = 0; i < responses.length; i++){
      console.log(responses[i]);
    }
    // socket.emit('quiz-response', responses)
    socket.emit('quiz-response', dataToSend)
    console.log("sent quiz response" + dataToSend)

    // location.replace("../video.html")

    document.getElementById("regForm").style.display = "none";
    document.getElementById("content").style.display = "block";

    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
  collectResponses(currentTab)
}

function collectResponses() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  // y = x[currentTab].getElementsByTagName("button");

  let currentAnswers = "answers" + String(currentTab)

  y = document.getElementsByClassName(currentAnswers)

  let answers = document.getElementsByClassName("answers")
  console.log(answers)


  for (let i = 0; i < answers.length; i++) {
    answers[i].addEventListener("click", function () {
      responses[currentTab] = answers[i].innerHTML
      console.log('responses: ' + responses)
    });
  }

  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

socket.on('question', (data) => {
  console.log("reciving data: " + data.message);
  displayQuestions(data.message)
  questionNumber++
})

  socket.on('summarize', function (data) {
    if (data.id != quizID){
      console.log("wrong person");
      return;}
    console.log("we're receiving a summary!");
    console.log(data.message.length);

    eye2 = 0;
    text = data.message;

    // delete placeholder text
    document.getElementById("content").innerHTML = "";
    // document.getElementById("content").scrollTop = scrollHeight;
    typeText2();
    // </br>
  });


function displayQuestions(data) {

  console.log("data to display: " + data)
  let incomingSting = data
  quesionArray = incomingSting.split('|')

  console.log(quesionArray)

  x = document.getElementsByClassName("tab");

  x[questionNumber].innerHTML = quesionArray[0]

  for (let i = 0; i < 4; i++) {
    let answers = document.createElement("div");

    answers.setAttribute("class", "answers");
    x[questionNumber].appendChild(answers);
    answersDisplay = document.getElementsByClassName("answers")
    answersDisplay[i + questionNumber * 4].innerHTML = quesionArray[i + 1]

    console.log(answers)
  }
  collectResponses()

  responded = false
}

// worst possible implementation of this hhHAHAAH
function typeText2(){
  if (eye2 < text.length) {
    let newText = document.getElementById("content");
    let i = text.charAt(eye2); 
    if (i == '\n'){
        newText.innerHTML += '<br>'  
        newText.scrollTop = newText.scrollHeight;
    } else {
    newText.innerHTML += i;
    }  
     eye2++;

  setTimeout(typeText2, speed);
//   if (eye == text.length){
  }
  else {
    let textContent = document.getElementById("content").textContent;
    const htmlContent = linkify(textContent);
    document.getElementById("content") = htmlContent;
  }
}

// stolen from stackOverflow:
// https://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript
function linkify(text) {
  var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + url + '</a>';
  });
}