import { routes } from './routes.js';

/* main */
window.onload = function () {
  let app = document.documentElement;

  if (
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
  ) {
    switch_theme('dark');
  } else {
    switch_theme('light');
  }

  // theme switcher
  document
    .getElementById('app_theme_switcher')
    .addEventListener('click', switch_theme, false);

  // routes handler
  window.addEventListener('hashchange', location_handler);
  location_handler();
};

/* Изменяет тему приложения */
function switch_theme() {
  let app = document.documentElement;
  let theme = app.getAttribute('data-bs-theme');
  let theme_switcher = document.getElementById('app_theme_switcher');

  let theme_icon = {
    dark: '☀️',
    light: '🌙',
  };

  if (theme == 'auto' || theme == 'light') {
    theme_switcher.innerText = theme_icon['dark'];
    app.setAttribute('data-bs-theme', 'dark');
  } else {
    theme_switcher.innerText = theme_icon['light'];
    app.setAttribute('data-bs-theme', 'light');
  }
}

const location_handler = async () => {
  let location = window.location.hash.replace('#', '');
  if (location.length == 0) {
    location = '/';
  }
  const route = routes[location] || routes['404'];
  const html = await fetch(route.template).then((response) => response.text());
  document.getElementById('content').innerHTML = html;
  document.title = route.title;
  document
    .querySelector('meta[name="description"]')
    .setAttribute('content', route.description);
};