// OPTIONS

const storedSetTheme = localStorage.getItem('theme')

function switchProxy () {
  var selecter = document.getElementById('proxySwitcher')
  var selectedOption = selecter.value

  localStorage.setItem('proxy', selectedOption)
  var storedChoice = localStorage.getItem('proxy')
  console.log(selectedOption)
}
function switchTheme () {
  var selecter = document.getElementById('themeSwitcher')
  var selectedOption = selecter.value
  if (selectedOption == 'dark') {
    changeCSS('--background-primary', '#191724', true)
    changeCSS('--navbar-color', '#26233a', true)
    changeCSS('--navbar-height', '60px', true)
    changeCSS('--navbar-text-color', '#7967dd', true)
    changeCSS('--input-text-color', '#e0def4', true)
    changeCSS('--input-placeholder-color', '#6e6a86', true)
    changeCSS('--input-background-color', '#1f1d2e', true)
    changeCSS('--input-placeholder-color', 'white', true)
    changeCSS('--input-border-color', '#eb6f92', true)
    changeCSS('--input-border-size', '1.3px', true)
    changeCSS('--navbar-link-color', '#e0def4', true)
    changeCSS('--navbar-font', '"Roboto"', true)
    changeCSS('--navbar-logo-filter', 'invert(0%)', true)
    changeCSS('--text-color-primary', '#e0def4', true)
    localStorage.setItem('theme', 'dark')
  }
  if (selectedOption == 'light') {
    changeCSS('--background-primary', '#d8d8d8', true)
    changeCSS('--navbar-color', '#a2a2a2', true)
    changeCSS('--navbar-height', '4em', true)
    changeCSS('--navbar-text-color', '#000000', true)
    changeCSS('--input-text-color', '#e0def4', true)
    changeCSS('--input-placeholder-color', 'white', true)
    changeCSS('--input-background-color', 'black', true)
    changeCSS('--input-border-color', '#eb6f92', true)
    changeCSS('--input-border-size', '1.3px', true)
    changeCSS('--navbar-link-color', '#000000', true)
    changeCSS('--navbar-font', '"Roboto"', true)
    changeCSS('--navbar-logo-filter', 'invert(30%)', true)
    changeCSS('--text-color-primary', '#303030', true)
    localStorage.setItem('theme', 'light')
  }
  if (selectedOption == 'custom') {
    let response = prompt('Please enter the code for a custom theme:', '')
    alert('This feature is not ready yet. Please try again later.')
  }
}

// onload event
window.onload = function () {
  let background = localStorage.getItem('--background-primary')
  let navbar = localStorage.getItem('--navbar-color')
  let navbarHeight = localStorage.getItem('--navbar-height')
  let navbarText = localStorage.getItem('--navbar-text-color')
  let inputText = localStorage.getItem('--input-text-color')
  let inputPlaceholder = localStorage.getItem('--input-placeholder-color')
  let inputBackground = localStorage.getItem('--input-background-color')
  let inputBorder = localStorage.getItem('--input-border-color')
  let inputBorderSize = localStorage.getItem('--input-border-size')
  let navbarFont = localStorage.getItem('--navbar-font')
  let navbarLink = localStorage.getItem('--navbar-link-color')
  let navbarLogoFilter = localStorage.getItem('--navbar-logo-filter')
  let textColorPrimary = localStorage.getItem('--text-color-primary')
  changeCSS('--background-primary', background)
  changeCSS('--navbar-color', navbar)
  changeCSS('--navbar-height', navbarHeight)
  changeCSS('--navbar-text-color', navbarText)
  changeCSS('--input-text-color', inputText)
  changeCSS('--input-placeholder-color', inputPlaceholder)
  changeCSS('--input-background-color', inputBackground)
  changeCSS('--input-border-color', inputBorder)
  changeCSS('--input-border-size', inputBorderSize)
  changeCSS('--navbar-link-color', navbarLink)
  changeCSS('--navbar-font', navbarFont)
  changeCSS('--navbar-logo-filter', navbarLogoFilter)
  changeCSS('--text-color-primary', textColorPrimary)
}

function changeCSS (variable, value, saveBool) {
  document.documentElement.style.setProperty(variable, value)

  if (saveBool === true) {
    saveCSS(variable, value)
  }
}

function saveCSS (variable, value) {
  localStorage.setItem(variable, value)
}

function resetViews () {
  changeCSS('--background-primary', '#191724', true)
  changeCSS('--navbar-color', '#26233a', true)
  changeCSS('--navbar-height', '60px', true)
  changeCSS('--navbar-text-color', 'rgb(121 103 221)', true)
  changeCSS('--navbar-link-color', '#e0def4', true)
  changeCSS('--navbar-font', '"Roboto"', true)
  changeCSS('--input-text-color', '#e0def4', true)
  changeCSS('--input-placeholder-color', '#6e6a86', true)
  changeCSS('--input-background-color', '#1f1d2e', true)
  changeCSS('--input-placeholder-color', 'white', true)
  changeCSS('--input-border-color', '#eb6f92', true)
  changeCSS('--input-border-size', '1.3px', true)
  return 'All views reset'
}
function saveIc () {
  console.log('Checked')
  var notification = `
              <div class="notification-container" id="notification-container">
              <div class="notification notification-success">
                  <strong>Success!</strong> Your settings have been saved!
              </div>
          </div>
          `
  document.getElementById('notifhere').innerHTML = notification
  setTimeout(() => {
    var NotificationOBJ = document.getElementById('notifhere')
  }, 2000)
}

function unsavedChanges () {
  var notification = `
      <div class="notification-container" id="notification-container">
      <div class="notification notification-danger" id="notification-container">
      <strong>Danger!</strong> You have unsaved changes!
  </div>
  </div>
          `
  document.getElementById('notifhere').innerHTML = notification
  setTimeout(() => {
    var NotificationOBJ = document.getElementById('notifhere')
  }, 2000)
}

var option = localStorage.getItem('nogg')

function toggleNoGG () {
  if (option === 'on') {
    option = 'off'
    localStorage.setItem('nogg', 'off')
  } else {
    option = 'on'
    localStorage.setItem('nogg', 'on')
  }
}
var option2 = localStorage.getItem('ADVcloak')
function toggleClickoff () {
  if (option2 === 'on') {
    option2 = 'off'
    localStorage.setItem('ADVcloak', 'off')
  } else {
    option2 = 'on'
    localStorage.setItem('ADVcloak', 'on')
  }
}