var lenQuiz = 42;

var storageKeyHistory = "GyakubeniQuiz.histories";
var storageKeyAnswerOrder = "GyakubeniQuiz.answerOrder." + quizID;
var storageKey = "GyakubeniQuiz.answers." + quizID;

if (localStorage.getItem("QuizInvisible.answers") != null) {
  localStorage.setItem(storageKey, localStorage.getItem("QuizInvisible.answers"));
  localStorage.removeItem("QuizInvisible.answers");
}

var userAnswers, answerOrder;
try {
  userAnswers = JSON.parse(localStorage.getItem(storageKey));
} catch {
  userAnswers = Array(lenQuiz);
  userAnswers.fill("");
}
try {
  answerOrder = JSON.parse(localStorage.getItem(storageKeyAnswerOrder));
} catch {
  answerOrder = [];
}
var cleared = false;
var allCorrect = false;

var difficulty = 1;
var shuffle = true;
var countable = false;

var requestID = 0;

var tweetTextBase = "";

function encode(str) {
  return btoa(encodeURIComponent(str));
}

function updateTweetURL() {

  var url = location.href;
  if (url.indexOf("chain=") != -1) {
    //url = url.replace(/chain=\d+/, "chain="+chain);
    url = url.replace(/&chain=\d+/, "");
  } else {
    //url = url + "&chain="+chain;
  }

  var tweetText = tweetTextBase;
  //if ($("#tweetsOrder").prop("checked")) {
  if (answerOrder.length > 0) {
    tweetText += "解答順：";
    for (var i=0; i<answerOrder.length; i++) {
      tweetText += (answerOrder[i] + 1);
      if (i != answerOrder.length-1) tweetText += ",";
    }
    tweetText += "\n";
  }
  var hashtags = "逆紅クイズ";
  var tweetURL = "https://twitter.com/intent/tweet"
  + "?text=" + encodeURIComponent(tweetText)
  + "&hashtags=" + encodeURIComponent(hashtags)
  + "&url=" + encodeURIComponent(url);
  $(".btn").attr("href", tweetURL);
}

function updateQuizzes() {
  var answersEncoded = [];
  for (var i=0; i<userAnswers.length; i++) {
    answersEncoded.push(encode(userAnswers[i]));
  }
  requestID++;
  $.ajax({
    url: "getQuizzes.php",
    type: "GET",
    data: {
      "requestID": requestID,
      "answers": answersEncoded,
      "difficulty": difficulty,
      "shuffle": shuffle,
      "quizID": quizID,
      "countable": countable,
    },
    dataType: 'json',
    success: function (data) {
      console.log(data);

      if (data.requestID != requestID) {
        console.log("old response");
        return;
      }

      var $questions = $(".questions");
      for (var i=0; i<$questions.length; i++) {
        $questions.eq(i).html(data.questions[i].replace(/\r?\n/g, "<br>"));
      }

      var $answers = $(".answers");
      var ok = true;
      for (var i=0; i<$answers.length; i++) {
        if (data.isCorrect[i]) {
          $answers.eq(i).addClass("isCorrect");
        } else {
          ok = false;
          $answers.eq(i).removeClass("isCorrect");
        }
      }
      if (ok) cleared = true;
      allCorrect = ok;

      var $hints = $(".hints");
      for (var i=0; i<$hints.length; i++) {
        if (data.hints == undefined || i >= data.hints.length || data.hints[i] == "") {
          $hints.eq(i).hide();
        } else {
          $hints.eq(i).show();
          var hint = data.hints[i];
          hint = hint.replace(/(https?:\/\/[\w!\?/\+\-_~=;\.,\*&@#\$%']+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
          hint = hint.replace(/\r?\n/g, "<br>");
          $hints.eq(i).children(".hintContents").eq(0).html(hint);
        }
      }

      $("#invisibleCharacters").html(data.invisibleCharacters);

      var regainedCharacters = "";
      for (s of data.correctAnswers) {
        regainedCharacters += s;
      }
      tmp = regainedCharacters.split('');
      tmp = tmp.filter(function (x, i, self) {
        return self.indexOf(x) === i;
      });
      tmp.sort();
      tmp = tmp.join(',');
      regainedCharacters = tmp.replace(/,/g, '');
      $("#regainedCharacters").text(regainedCharacters);

      for (var i=0; i<data.isCorrect.length; i++) {
        if (data.isCorrect[i] && !answerOrder.includes(i)) {
          answerOrder.push(i);
          localStorage.setItem(storageKeyAnswerOrder, JSON.stringify(answerOrder));
        }
      }

      /*
      if (cleared && !allCorrect) {
        $("#perfect").css("color", "red");
      } else {
        $("#perfect").css("color", "");
      }
      */

      $("#judge").text(data.judge);
      $("#clearComment").html(data.clearComment);

      $(".label").text(data.tweetButtonText);

      tweetTextBase = data.tweetText;
      updateTweetURL();

      localStorage.setItem(storageKey, JSON.stringify(data.correctAnswers));
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('送信に失敗しました。');
        console.log(XMLHttpRequest.responseText);
    }
  });
}

function resetAnswers() {
  if (confirm("解答フォームをリセットしますか？")) {
    $("input.answers").val("");
    userAnswers.fill("");
    answerOrder = [];
    localStorage.setItem(storageKeyAnswerOrder, "[]");
    updateQuizzes();
  }
}

function updateTags(data) {
  console.log(data);
  if (data == null || data.tags == null || data.tags.length == 0) {
    $(".tagList").html("この問題にはまだタグが付けられていません。");
  } else {
    $(".tagList").html("");
    for (var tag of data.tags) {
      $(".tagList").append('<a class="tagBoxContents" href="search.php?tagIDs=' + tag.id + '" target="_blank" rel="noopener noreferrer">' + tag.name + '</a>');
    }
  }

  $(".tagEditList").html("");
  for (var info of data.tagInfo) {
    var attr = (data.tagIDs.includes(info.id) ? 'exists="exists"' : "");
    $(".tagEditList").append('<a class="tagBoxContents" tagID="' + info.id + '" ' + attr + '>' + info.name + '</a>');
  }
}

function getTags() {
  $.ajax({
    url: "functions/getTags.php",
    type: "GET",
    data: {
      "quizID": quizID,
    },
    dataType: 'json',
    success: function (data) {
      updateTags(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('通信に失敗しました。');
        console.log(XMLHttpRequest.responseText);
    }
  });
}

function monitorTagEditList() {
  $(".tagEditList").on("click", ".tagBoxContents", function() {
    var $e = $(this);
    var tagID = Number($e.attr("tagID"));
    var exists = $e.attr("exists") == "exists";
    console.log(exists);
    $.ajax({
      url: "functions/postTag.php",
      type: "POST",
      data: {
        "quizID": quizID,
        "tagID": tagID,
        "adds": !exists,
      },
      dataType: 'json',
      success: function (data) {
        updateTags(data);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert('通信に失敗しました。');
          console.log(XMLHttpRequest.responseText);
      }
    });
  });
}


$(function(){

  if (userAnswers == undefined) {
    userAnswers = Array(lenQuiz);
    userAnswers.fill("");
  } else if (userAnswers.length != $(".answers").length) {
    var n = userAnswers.length - $(".answers").length;
    if (n > 0) {
      for (var i=0; i<n; i++) userAnswers.push("");
    } else {
      userAnswers = userAnswers.slice(0, $(".answers").length);
    }
  }

  var $answers = $(".answers");
  for (var i=0; i<$answers.length; i++) {
    $answers.eq(i).val(userAnswers[i]);
  }

  if (answerOrder == null) {
    answerOrder = [];
  }

  $(".answers").on("keyup input", function() {
      console.log("keyup or input: " + $(this).val());
      var number = $('.answers').index(this);
      var val = $(this).val();
      if (val != userAnswers[number]) {
        userAnswers[number] = val;
        if ($(this).val().length == $(this).attr("answerLength") || JSON.parse(localStorage.getItem(storageKey))[number] != "") {
          updateQuizzes();
        }
      }

      $(this).siblings(".answerLength").text($(this).val().length + "/" + $(this).attr("answerLength"));
  });

  $("#countable").on("click", function() {
    countable = $(this).prop("checked");
    updateQuizzes();
  });

  updateQuizzes();

  getTags();

  monitorTagEditList();

  //$('#tweetsOrder').on("change", updateTweetURL);

});