const openSettingScreenButton = document.querySelector("#open-setting-screen-button");
    const closeSettingScreenButton = document.querySelector("#close-setting-screen-button");
    const saveSettingsButton = document.querySelector("#save-settings-button");
    
    const delayUnlockButton = document.querySelector("#delay-unlock-button");
    const unlockButton = document.querySelector("#unlock-button");
    
    const settingScreen = document.querySelector(".setting-screen");
    const mainScreen = document.querySelector(".main-screen");
    
    const messageContainer = document.querySelector("#message-container");
    
    const deviceIDInput = document.querySelector("#device-id");
    const delayInput = document.querySelector("#delay-time");
    const apiKeyInput = document.querySelector("#api-key");
    
    const showDelay = document.querySelector("#show-delay");
    let deviceID = "";
    let delay = "";
    let apiKey = "";
    const unlockUrl = "https://ths.tnet.space/cgi-bin/unlock-main.cgi";

//     make fetch function that calls cgi script with attributes (device id, api key, delay)
    const unlockDoor = (e, dID, aK, d) => {
      fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`)
//       fetch(unlockUrl)
        .then(response => response.text())
        .then(data => messageContainer.innerHTML = data);
      }

    const setSettings = () => {
      if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
        apiKey = localStorage.getItem("apiKey");
        deviceID = localStorage.getItem("deviceID");
        if (localStorage.getItem("delay")) {
          delay = localStorage.getItem("delay");
        } else {
          delay = 0;
        }
        apiKeyInput.value = apiKey;
        deviceIDInput.value = deviceID;
        delayInput.value = delay;
        showDelay.innerHTML = `${delay}s`;
      } else {
      gotoSettingScreen();
      }
    }

    const gotoSettingScreen = () => {
      openSettingScreenButton.style.display = "none";
      closeSettingScreenButton.style.display = "block";
      settingScreen.style.left = "0";
      mainScreen.style.left = "-100%";
      }
      
     const gotoMainScreen = () => {
      closeSettingScreenButton.style.display = "none";
      openSettingScreenButton.style.display = "block";
      mainScreen.style.left = "0";
      settingScreen.style.left = "100%";
      }
      
    openSettingScreenButton.addEventListener("click", gotoSettingScreen);
      
    closeSettingScreenButton.addEventListener("click", gotoMainScreen);

//  Save settings button
    saveSettingsButton.addEventListener("click", function() {
      localStorage.setItem("deviceID", deviceIDInput.value);
      localStorage.setItem("delay", delayInput.value);
      localStorage.setItem("apiKey", apiKeyInput.value);
      setSettings();
      gotoMainScreen();
      });

    unlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, 0));
      
    delayUnlockButton.addEventListener("click", function () {
      messageContainer.innerHTML = "Delay Unlock";
      });

    document.body.onload = setSettings;
    let date = new Date();
    messageContainer.innerHTML = date.toLocaleDateString();