(async function() {

  const $version = await new Promise(r => chrome.management.getSelf(self => r(self.version)));
  document.getElementById("version").innerText = `v${$version}`;

  await chrome.storage.local.get().then(items => {
    document.getElementById("activate").checked = items["__activate"] || false;
    document.getElementById("username").value = items["__username"] || "";
    document.getElementById("password").value = items["__password"] || "";
    document.getElementById("frequency").value = items["__frequency"] || 1;
    document.getElementById("frequency_info").innerText = items["__frequency"] || 1;
    document.getElementById("status").innerText = items["__status"] || "unknown";
    let currentAppt = items["__currentAppt"] || {"consulate": "somewhere", "date": "some time"};
    document.getElementById("currApptConsulate").innerText = currentAppt["consulate"];
    document.getElementById("currApptDate").innerText = currentAppt["date"];
    document.getElementById("deltaAppt").value = items["__deltaAppt"] || 1;
    document.getElementById("deltaNow").value = items["__deltaNow"] || 1;
  });

  // update frequency value
  chrome.storage.onChanged.addListener((changes, area) => {
    if (changes.__frequency)
      document.getElementById("frequency_info").innerText = changes.__frequency.newValue;
  });

  // activate checkbox
  document.getElementById("activate").addEventListener("change", async e => {
    await chrome.storage.local.set({ "__activate": e.target.checked });
  });

  // credentials
  let usernameField = document.getElementById("username");
  let passwordField = document.getElementById("password");
  let showPasswordButton = document.getElementById("showPassword");
  let saveCredsButton = document.getElementById("saveButton");
  let saveStatusElement = document.getElementById("saveStatus");

  async function save_credentials() {
    await chrome.storage.local.set({
      "__username": usernameField.value,
      "__password": passwordField.value
    });
    saveStatusElement.classList.add("show");
    setTimeout(() => {
      saveStatusElement.classList.remove("show");
    }, 2000);
  }

  usernameField.addEventListener("keypress", async e => {
    if (e.key === "Enter") {
      await save_credentials();
    }
  });
  passwordField.addEventListener("keypress", async e => {
    if (e.key === "Enter") {
      await save_credentials();
    }
  });
  saveCredsButton.addEventListener("click", async () => {
    await save_credentials();
    await chrome.storage.local.set({ "__signinAttempts": 0 });
  });

  showPasswordButton.addEventListener("mousedown", function() {
    passwordField.type = "text";
  });
  showPasswordButton.addEventListener("mouseup", function() {
    passwordField.type = "password";
  });
  
  // range sliders
  document.getElementById("frequency").addEventListener("input", function() {
    chrome.storage.local.set({ __frequency: this.value });
  });
  document.getElementById("deltaAppt").addEventListener("input", function() {
    chrome.storage.local.set({ __deltaAppt: this.value });
  });
  document.getElementById("deltaNow").addEventListener("change", function() {
    chrome.storage.local.set({ __deltaNow: this.value });
  });

  // consulates
  await chrome.storage.local.get(['__consulates']).then((result) => {
    let consulates = result['__consulates'];

    let html = `
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col"></th>
            <th scope="col">City</th>
            <th scope="col" style="white-space: nowrap;">Current Date</th>
            <th scope="col" style="white-space: nowrap;">Best Date</th>
            <th scope="col">Autobook</th>
          </tr>
        </thead>
        <tbody>
    `
    for (let c in consulates) {
      let cSelected = consulates[c].isSelected === true ? "checked" : "";
      let cAutobook = consulates[c].autobook === true ? "checked" : "";
      let cId = consulates[c].id;
      html += `
          <tr>
            <td>
              <div class="form-check form-checkbox" style="text-align: left;">
                <input class="form-check-input" type="checkbox" role="switch" id="isSelected-${cId}" ${cSelected}>
              </div>
            </td>
            <td style="white-space: nowrap;">${c}</td>
            <td style="white-space: nowrap;"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
            <td style="white-space: nowrap;"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
            <td>
              <div class="form-check form-switch" style="text-align: left;">
                <input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
                <!--<label class="form-check-label" for="autobook-${cId}">Autobook</label>-->
              </div>
            </td>
          </tr>
      `;
    }
    html += `</tbody></table>`;
    document.getElementById('consulatesConfig').innerHTML = html;

    for (let c in consulates) {
      let cId = consulates[c].id;
      document.getElementById(`isSelected-${cId}`).addEventListener("change", async e => {
        consulates[c].isSelected = e.target.checked;
        await chrome.storage.local.set({ "__consulates": consulates });        
      });
      document.getElementById(`autobook-${cId}`).addEventListener("change", async e => {
        consulates[c].autobook = e.target.checked;
        await chrome.storage.local.set({ "__consulates": consulates });
      });    
    }
  });

  // reset button
  document.getElementById("resetButton").addEventListener("click", async () => {
    if (confirm("Are you sure you want to reset?")) {
      await chrome.storage.local.get().then(items => {
        chrome.storage.local.clear();
        // keep user parameters
        chrome.storage.local.set({
          "__activate": items["__activate"] || false,
          "__username": items["__username"] || "",
          "__password": items["__password"] || "",
          "__frequency": items["__frequency"] || 1,
          "__deltaAppt": items["__deltaAppt"] || 1,
          "__deltaNow": items["__deltaNow"] || 1,
          "__autobook": items["__autobook"] || false,
        });
      });
      document.getElementById("status").innerText = "unknown";
      document.getElementById("currApptConsulate").innerText = "somewhere";
      document.getElementById("currApptDate").innerText = "some time";
      document.getElementById('consulatesConfig').innerHTML = "No consulates found.";

      document.getElementById("resetStatus").classList.add("show");
      setTimeout(() => {
        document.getElementById("resetStatus").classList.remove("show");
      }, 2000);
  
    }
  });

  // show config button
  document.getElementById("showConfigButton").addEventListener("click", async () => {
    let config = await chrome.storage.local.get();
    let configStr = JSON.stringify(config, null, 2);
    let url = "data:text/plain;charset=utf-8," + encodeURIComponent(configStr);
    chrome.tabs.create({ url: url });
});    

})();