let dmTimeoutId = null;
const btnEl = document.getElementById('dm_btn');
const icon = btnEl.querySelector('svg');
const iconUseEL = btnEl.querySelector('use');
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

const toggleBtnState = (force, init=false) => {
  clearTimeout(dmTimeoutId);
  if (!init) {
    icon.classList.add('dm-spin');
    dmTimeoutId = setTimeout(() => icon.classList.remove('dm-spin'), 500);
  }
  iconUseEL.setAttribute('xlink:href', force ? '#moon_icon' : '#sun_icon');
};

const getPreferredTheme = () => {
  const mode = localStorage.getItem("darkmode");
  if (mode) {
    return mode === "true";
  } else {
    return darkModeMediaQuery.matches;
  }
};

const applyMode = (isDarkMode, fromListener = false) => {
  document.body.classList.toggle('dark-mode', isDarkMode);
  toggleBtnState(isDarkMode, fromListener);
  localStorage.setItem('darkmode', isDarkMode)
};

// Добавляем слушатель изменений системной темы
darkModeMediaQuery.addListener((e) => {
  // Применяем тему только если пользователь не установил свои предпочтения
  if (!localStorage.getItem("darkmode")) {
    applyMode(e.matches, true);
  }
});

applyMode(getPreferredTheme(), true);

btnEl.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  applyMode(document.body.classList.contains('dark-mode'));
});

darkModeMediaQuery.addEventListener('change', (e) => {
  if (!localStorage.getItem("darkmode")) {
    applyMode(e.matches, true);
  }
});