// body color body background, h1 tag
const elementoH1 = document.getElementsByTagName("h1")[0]
const elemento2H1 = document.getElementsByTagName("h1")[1]
const bodyElement = document.getElementsByTagName("body")[0]
const themeButton = document.getElementById("mcThemeButton")
let buttonClasses = themeButton.classList
let currentTheme = 0
let themeSetTimes = 0

// Funzione per impostare il tema
function setTheme(theme){
  if(theme == "dark"){
    elementoH1.style.color = "white"
    elemento2H1.style.color = "white"
    bodyElement.style.color = "white"
    bodyElement.style.background = "black"
    buttonClasses.remove("btn-outline-dark")
    buttonClasses.remove("bi-sun-fill")
    buttonClasses.add("btn-outline-light")
    buttonClasses.add("bi-moon")
  }else{
    elementoH1.style.color = "black"
    elemento2H1.style.color = "black"
    bodyElement.style.color = "black"
    bodyElement.style.background = "white"
    buttonClasses.add("btn-outline-dark")
    buttonClasses.add("bi-sun-fill")
    buttonClasses.remove("btn-outline-light")
    buttonClasses.remove("bi-moon")
  }

  themeSetTimes++
  console.log(themeSetTimes + " | Theme set to:" + theme)

  currentTheme = theme
}

// Vado a prendere la data, aggiungo un paio di mesi e salvo un cookie con quella durata
function createCookie(name, value, expireMonths, domain, path) { 
  var time = new Date()
  time.setMonth(time.getMonth() + expireMonths)
  var expireTime = time.toUTCString()
  document.cookie = name + '=' + value + ';expires=' + expireTime + ';domain=' + domain + ";path=" + path;
}

// Divido i biscotti, e quando trovo il mio biscotto vado a prenderne il valore
const documentBiscuits = document.cookie
let biscotti = documentBiscuits.split(";")
let biscottoTheme = 0
biscotti.forEach(biscotto => {
  if (biscotto.includes("matteoc_theme")){
    biscotto = biscotto.split("=")[1]
    if (biscotto == "dark" || biscotto == "light"){
      biscottoTheme = biscotto
      console.log("Cookie value: " + biscottoTheme)
    }
  }
})

// Se il biscotto ha un valore adatto, uso quello, se no' vado ad usare le preferenze del browser
if (biscottoTheme == "dark"){
  console.log("Using black theme from cookie")
}else if(biscottoTheme == "light"){
  console.log("Using white theme from cookie")
}else{
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
    console.log("Using white theme from user prefs & creating cookie (1 month duration)")
    createCookie("matteoc_theme", "light", 1, ".matteoc.cloud", "/")
    biscottoTheme = "light"
  }else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    console.log("Using black theme from user prefs & creating cookie (1 month duration)")
    createCookie("matteoc_theme", "dark", 1, ".matteoc.cloud", "/")
    biscottoTheme = "dark"
  }else{
    console.log("Failed to read browser prefs. Creating cookie (1 month duration) and setting theme to black")
    createCookie("matteoc_theme", "dark", 1, ".matteoc.cloud", "/")
    biscottoTheme = "dark"
  }
}
setTheme(biscottoTheme) // una volta deciso il valore, impostiamo il tema


// funzione per rilevare il click del bottone e aggiornare il tema
themeButton.onclick = buttonSetTheme

function buttonSetTheme(){
  if (currentTheme == "dark") {
    setTheme("light")
  }else{
    setTheme("dark")
  }
  console.log("Button pressed! Setting theme to " + currentTheme + ". Also updating the cookie! (1 month duration)")
  createCookie("matteoc_theme", currentTheme, 1, ".matteoc.cloud", "/") // risalviamo il cookie con la nuova preferenza
}