// Função para alternar o tema
const toggleTheme = () => {
  const currentTheme = localStorage.getItem('theme') || 'light';
  let newTheme;

  if (currentTheme === 'light') {
    newTheme = 'dark';
  } else if (currentTheme === 'dark') {
    newTheme = 'system';
  } else {
    newTheme = 'light';
  }

  localStorage.setItem('theme', newTheme);
  applyTheme();
}

// Função para aplicar o tema
const applyTheme = () => {
  const theme = localStorage.getItem('theme');
  const htmlElement = document.documentElement;
  const themeButton = document.getElementById('theme-button');
  const buttonTheme = document.querySelectorAll(".button-theme");

  if (theme === 'dark') {
    htmlElement.classList.add('dark');
    htmlElement.classList.remove('light');
    buttonTheme.forEach(button => { button.innerHTML = `<i class="bi bi-moon"></i>` });
  } else if (theme === 'system') {
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (prefersDarkScheme) {
      htmlElement.classList.add('dark');
      htmlElement.classList.remove('light');
      buttonTheme.forEach(button => { button.innerHTML = `<i class="bi bi-display"></i>`})
    } else {
      htmlElement.classList.add('light');
      htmlElement.classList.remove('dark');
      buttonTheme.forEach(button => { button.innerHTML = `<i class="bi bi-display"></i>`})
    }
  } else {
    htmlElement.classList.add('light');
    htmlElement.classList.remove('dark');
    buttonTheme.forEach(button => { button.innerHTML = `<i class="bi bi-sun"></i>`})
  }
}

// Aplicar o tema quando a página for carregada
document.addEventListener('DOMContentLoaded', applyTheme);