import adapter from "./adapter";

window.adapters = [];

function $(id) {
  return document.getElementById(id);
}

function main() {
  window.settings = JSON.parse(localStorage.getItem("settings"));;
  if (window.settings != null) {
    for (let s of window.settings.adapters) {
     switch (s.protocol) {
        case "nostr": 
          let a = adapter.toNostrAdapter(adapter.createAdapter(), s);
          window.adapters.push(a);
          break;
      }
    } 
  } else {
    console.log("no settings exist for this client");
    window.settings = { adapters: [] };
  }
};

function showSettings() {
  // tab bar hidden
  const tabbar = $("tabbar");
  tabbar.style.display = "none";
  
  // tabcontent to show settings ui
  const tabcontent = $("tabcontent");
  
  let html = "<p>this is our settings dialogue</p>";
  html += "<button onclick='addAdapter()'>New</button>";
  html += adapters.reduce((self, a) => {
    self += `<li><a href='#' onclick='editAdapter(${a.nickname})'>${a.nickname}</a></li>`
    return self;
  }, "<ul id='settings_adapterlist'>");
  html += "</ul>";
  html += "<button onclick='saveSettings()'>save</button>";
  tabcontent.innerHTML = html;
}

function addAdapter() {
  const tabcontent = $("tabcontent");
  // dropdown for protocol
  let html = "<select id='settings_newadapter_protocolselect' onchange='fillAdapterProtocolOptions()'>";
  html += [ "nostr" ].reduce((self, p)=>{
    self += `<option value='${p}'>${p}</option>`;
    return self;
  }, "");
  html += "</select>";
  // depending on protocol, different fields
  // nostr: privkey, initial relays
  html += "<div id='settings_newadapter_protocoloptions'>";
  html += "  <input id='settings_newadapter_nickname'/>";
  html += "  <input id='settings_newadapter_nostr_privkey'/>";
  html += "  <input id='settings_newadapter_nostr_default_relays'/>";
  html += "</div>";
  // masto/AP: server, username, pw/apikey
  // save button, back button
  html += "<button onclick='saveAdapter()'>Add</button>";
  html += "<button onclick='showSettings()'>Back</button>";
  
  tabcontent.innerHTML = html;
}

function fillAdapterProtocolOptions() {
  const proto = $("settings_newadapter_protocolselect");
  console.log(proto.options[proto.selectedIndex]);
}

function saveSettings() {
  if (window.settings) {
    localStorage.setItem("settings", JSON.stringify(window.settings));
  }
  // tab bar hidden
  const tabbar = $("tabbar");
  tabbar.style.display = "block";
  
  // tabcontent to show settings ui
  const tabcontent = $("tabcontent");
  tabcontent.innerHTML = "";
}

function saveAdapter() {
  let self = {};
  // get selected adapter protocol
  const proto = $("settings_newadapter_protocolselect");
  console.log(proto.options[proto.selectedIndex]);
  
  // switch protocol
  switch (proto.options[proto.selectedIndex].value) {
  // nostr: save privkey
  //        save relays
    case "nostr":
        const privkey = $("settings_newadapter_nostr_privkey").value;
        const relays = $("settings_newadapter_nostr_default_relays").value;
        const nickname = $("settings_newadapter_nickname").value;
        self = { nickname: nickname, protocol: "nostr", privkey: privkey, relays: relays.split(",").map(r=>r.trim()) };
      break;
  // AP/masto: whatever
    case "ap":
      break;
  }
  window.settings.adapters.push(self);
  adapters.push(adapter.toNostrAdapter(adapter.createAdapter(), self));
  localStorage.setItem("settings", JSON.stringify(window.settings));
  showSettings();
}

window.addAdapter = addAdapter;
window.saveAdapter = saveAdapter;
window.fillAdapterProtocolOptions = fillAdapterProtocolOptions;
window.showSettings = showSettings;
window.saveSettings = saveSettings;

main();