'use strict'

const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)

const debugStorage = () => {
  for(var i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    console.debug(key, " = ", localStorage[key])
  }
}

$("#name").outerHTML = `<span id="name" class="toggle-field">${$("#name").getAttribute('value')}</span>`;

$("#name").addEventListener("click", (e) => {
  e.preventDefault();
  createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`);
});

const removeOverlay = () => {
  $('body').removeChild($('.overlay'))
  $('body').removeChild($('.modal'))
}

const createModal = (text) => {
  const overlay = document.createElement('div')
  const popin = document.createElement('div')

  popin.innerHTML = text
  popin.className = 'modal'
  overlay.className = 'overlay'
  $('body').appendChild(overlay)
  $('body').appendChild(popin)

  overlay.addEventListener('click', removeOverlay)
  $('body').insertBefore(overlay, $('main'))

  $("#submitTextField").addEventListener("click", () => {
    $("#name").innerHTML = $("#nameUpdateField").value
    removeOverlay()
  });
}

$$('input').forEach((inputElement) => {
  inputElement.addEventListener("change", () => {
    localStorage[inputElement.name] = inputElement.value
  });
});

if(document.getElementById("type_sondage")) {
  type_sondage.addEventListener('change', function() {
    let typeSondage = this.options[this.selectedIndex].text;
    if(typeSondage == "classique") {
      localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
      $('#next').href = "reponses.html";
    } else {
      localStorage.setItem('type_sondage', 'dates');
      $('#next').href = "dates.html";
    }
    debugStorage()
  })
}

if(document.getElementById("startButton")) {
  startButton.addEventListener('click', function () {
    localStorage.clear()
    localStorage.setItem('type_sondage', 'classique');
  });
}