function smoothTextChange(element, newText) {
  // Temporarily hide the element
  element.classList.add('hide');

  setTimeout(() => {
      element.innerText = newText;
      element.classList.remove('hide');
  }, 500); // Wait for the transition to finish
}

(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["cfg_activate"] || false;
    document.getElementById("username").value = items["cfg_username"] || "";
    document.getElementById("password").value = items["cfg_password"] || "";
    document.getElementById("frequency").value = items["cfg_frequency"] || 1;
    document.getElementById("frequency_info").innerText = items["cfg_frequency"] || 1;
    document.getElementById("status").innerText = items["ctx_statusMsg"] || "unknown";
    let currentAppt = items["ctx_currentAppt"] || {"consulate": "somewhere", "date": "some time"};
    document.getElementById("currApptConsulate").innerText = currentAppt["consulate"];
    document.getElementById("currApptDate").innerText = currentAppt["date"];
    document.getElementById("deltaAppt").value = items["cfg_deltaAppt"] || 1;
    document.getElementById("deltaNow").value = items["cfg_deltaNow"] || 1;
  });

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

  // activate checkbox
  document.getElementById("activate").addEventListener("change", async e => {
    await chrome.storage.local.set({ "cfg_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({
      "cfg_username": usernameField.value,
      "cfg_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({ "ctx_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({ cfg_frequency: this.value });
  });
  document.getElementById("deltaAppt").addEventListener("input", function() {
    chrome.storage.local.set({ cfg_deltaAppt: this.value });
  });
  document.getElementById("deltaNow").addEventListener("change", function() {
    chrome.storage.local.set({ cfg_deltaNow: this.value });
  });

  // consulates
  await chrome.storage.local.get(['cfg_consulates', 'ctx_consulates']).then((result) => {
    let consCfg = result['cfg_consulates'];
    let consCtx = result['ctx_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">Book</th>
          </tr>
        </thead>
        <tbody>
    `
    for (let c in consCtx) {
      let cSelected = consCfg[c]?.isSelected === true ? "checked" : "";
      let cAutoBook = consCfg[c]?.autoBook === true ? "checked" : "";
      let cId = consCtx[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 class="smooth-text" id="currentDate-${cId}">${consCtx[c].currentDate || "-"}</span></td>
            <td style="white-space: nowrap;"><span class="smooth-text" id="bestDate-${cId}">${consCtx[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 consCtx) {
      let cId = consCtx[c].id;
      document.getElementById(`isSelected-${cId}`).addEventListener("change", async e => {
        consCfg[c].isSelected = e.target.checked;
        await chrome.storage.local.set({ "cfg_consulates": consCfg });        
      });
      document.getElementById(`autoBook-${cId}`).addEventListener("change", async e => {
        consCfg[c].autoBook = e.target.checked;
        await chrome.storage.local.set({ "cfg_consulates": consCfg });
      });

      // update current & best dates
      chrome.storage.onChanged.addListener((changes, area) => {
        if (changes.ctx_consulates) {
          let newCurrentDate = changes.ctx_consulates.newValue[c].currentDate || "-";
          let newBestDate = changes.ctx_consulates.newValue[c].bestDate || "-";

          let el = document.getElementById(`currentDate-${cId}`);
          if (el && el.innerText != newCurrentDate)
            smoothTextChange(el, newCurrentDate);
          el = document.getElementById(`bestDate-${cId}`);
          if (el && el.innerText != newBestDate)
            smoothTextChange(el, newBestDate);
        }
      });    
    }
  });

  // 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({
          "cfg_activate": items["cfg_activate"] || false,
          "cfg_username": items["cfg_username"] || "",
          "cfg_password": items["cfg_password"] || "",
          "cfg_frequency": items["cfg_frequency"] || 1,
          "cfg_deltaAppt": items["cfg_deltaAppt"] || 1,
          "cfg_deltaNow": items["cfg_deltaNow"] || 1,
        });
      });
      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 });
});    

})();