(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("status").innerText = items["__status"] || "unknown";
    document.getElementById("deltaAppt").value = items["__deltaAppt"] || 1;
    document.getElementById("deltaNow").value = items["__deltaNow"] || 1;
  });

  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 });
  });

})();