// Forked from: https://codepen.io/arcs/pen/OmZaex
var questions = [
  { question: "What's your name?" },
  { question: "What's your email?", pattern: /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/ },
  { question: "Whats your age?", type: "number" }
];

(function() {
  var tTime = 100; // transition transform time from #register in ms
  var wTime = 200; // transition width time from #register in ms
  var eTime = 1000; // transition width time from inputLabel in ms

  // init
  // --------------
  var position = 0;

  putQuestion();

  progressButton.addEventListener("click", validate);
  inputField.addEventListener("keyup", function(e) {
    transform(0, 0); // ie hack to redraw
    if (e.keyCode == 13) validate();
  });

  // functions
  // --------------

  // load the next question
  function putQuestion() {
    inputLabel.innerHTML = questions[position].question;
    inputField.value = "";
    inputField.type = questions[position].type || "text";
    inputField.focus();
    showCurrent();
  }

  // when submitting the current question
  function validate() {
    // set the value of the field into the array
    questions[position].value = inputField.value;

    // check if the pattern matches
    if (!inputField.value.match(questions[position].pattern || /.+/)) wrong();
    else
      ok(function() {
        // set the progress of the background
        progress.style.width = (++position * 100) / questions.length + "vw";

        // if there is a new question, hide current and load next
        if (questions[position]) hideCurrent(putQuestion);
        else hideCurrent(done);
      });
  }

  // helper
  // --------------

  function hideCurrent(callback) {
    inputContainer.style.opacity = 0;
    inputProgress.style.transition = "none";
    inputProgress.style.width = 0;
    setTimeout(callback, wTime);
  }

  function showCurrent(callback) {
    inputContainer.style.opacity = 1;
    inputProgress.style.transition = "";
    inputProgress.style.width = "100%";
    setTimeout(callback, wTime);
  }

  function transform(x, y) {
    register.style.transform = "translate(" + x + "px ,  " + y + "px)";
  }

  function ok(callback) {
    register.className = "";
    setTimeout(transform, tTime * 0, 0, 10);
    setTimeout(transform, tTime * 1, 0, 0);
    setTimeout(callback, tTime * 2);
  }

  function wrong(callback) {
    register.className = "wrong";
    for (
      var i = 0;
      i < 6;
      i++ // shaking motion
    )
      setTimeout(transform, tTime * i, ((i % 2) * 2 - 1) * 20, 0);
    setTimeout(transform, tTime * 6, 0, 0);
    setTimeout(callback, tTime * 7);
  }
})();

var cross_origin = "https://cors-anywhere.herokuapp.com/";
var SHEET_API_URL =
  cross_origin +
  "https://script.google.com/macros/s/AKfycby-rHZvrWa_jveg9NxV8feYQcyDKkSw1GLScidivZy2fh4_AFQm/exec";

function show_done() {
  var eTime = 1000;
  var h1 = document.createElement("h1");
  h1.appendChild(
    document.createTextNode(
      "Thank you for registering " + questions[0].value + "!"
    )
  );
  setTimeout(function() {
    register.parentElement.appendChild(h1);
    setTimeout(function() {
      h1.style.opacity = 1;
    }, 50);
  }, eTime);
}

// when all the questions have been answered
function done() {
  // remove the box if there is no next question
  register.className = "close";

  var sheet_data = {
    Name: questions[0].value,
    Email: questions[1].value,
    Age: questions[2].value
  };
  // Calling the API
  var jqxhr = $.ajax({
    url: SHEET_API_URL,
    method: "GET",
    dataType: "json",
    crossDomain: true,
    data: sheet_data,
    success: function(response) {
      // add the h1 at the end with the welcome text
      show_done();
    }
  });
}