/**
 * File to handle editing the settings from the menu itself.
 * 
 * A modal will be shown where the user can edit settings
 * and finally when submitted, the settings will be written to
 * the config.json and this config is read each time the page
 * loads.
 */

modalId = "settings"
closeId = "close"
jsonContainer = "jsoneditor"

let gear = false

// Detect browser
BROWSER = detectBrowser()

document.getElementById('settings-cog').onclick = function() {
  if (gear == false) {	
    gear = true;
    showSettings()
  } else if (gear == true) {
      modalEl.style.display = "none"
      gear = false;
      // Get the updated JSON
      updatedJson = editor.get()
      BROWSER.storage.sync.set(updatedJson)
      document.getElementById(jsonContainer).innerHTML = ""
      location.reload()
  }
}

function showSettings() {
    modalEl = document.getElementById(modalId)
    closeBtn = document.getElementsByClassName(closeId)[0]
    modalEl.style.display = "block"

    // Define the jsonEditor
    container = document.getElementById(jsonContainer)
    const options = {
        mode: 'tree',
        modes: ['code', 'tree', 'view']
    }
    const editor = new JSONEditor(container, options)
    loadJson(editor)

    closeBtn.onclick = () => {
        modalEl.style.display = "none"
        // Get the updated JSON
        updatedJson = editor.get()
        BROWSER.storage.sync.set(updatedJson)
        document.getElementById(jsonContainer).innerHTML = ""
        location.reload()
    }
}

async function loadJson(editor) {
    BROWSER.storage.sync.get(async result => {
        if (Object.keys(result).length == 0) {
            const response = await fetch("config.json")
            result = await response.json()
        }
        // Populate the editor
        editor.set(result)
    })
}

function detectBrowser() {
    // Firefox
    if (typeof InstallTrigger !== 'undefined')
        BROWSER = browser
    else if (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime))
        BROWSER = chrome

    return BROWSER
}