<script>
  import { browser } from '$app/environment'
  import { onMount } from 'svelte'
  import { locale, _ } from 'svelte-i18n'

  const locales = { 'es': '🇪🇸', 'en': '🇺🇸', 'ro': '🇷🇴'}
  const navlinks = { 'capabilities': 'cards', 'projects': 'projects', 'tech': 'stack' }

  let darkMode = $state(false)
  function toggleDarkMode() {
    if (!browser) return;
    const bodyClasses = document.getElementsByTagName('body')[0].classList
    darkMode = !darkMode
    bodyClasses.remove(darkMode? 'light': 'dark')
    bodyClasses.add(darkMode? 'dark': 'light')
  }
  onMount(()=>{
    darkMode = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) || document.getElementsByTagName('body')[0].classList.contains('dark')
  })
</script>

<h6 class="l m"><a href="#title">Andrei Molnar</a></h6>
<div class="max l m"></div>
<div class="l m">
  {#each Object.entries(navlinks) as [id, intl]}
    <a href="#{id}" class="chip round">{$_(`${intl}.slug`)}</a>
  {/each}
</div>
<button class="s transparent circle" data-ui="#nav-menu">
  <i>menu</i>
  <menu class="top no-wrap" id="nav-menu">
    <li>
      <a href="#title">Andrei Molnar</a>
    </li>
    {#each Object.entries(navlinks) as [id, intl]}
      <li>
        <a href="#{id}">{$_(`${intl}.slug`)}</a>
      </li>
    {/each}
  </menu>
</button>

<div class="max"></div>

<button class="s transparent circle" data-ui="#lang-menu">
  <i>language</i>
  <menu class="top no-wrap" id="lang-menu">
    {#each Object.entries(locales) as [name, flag]}
      <li data-ui="#lang-menu" onclick={()=>$locale = name}>{flag}</li>
    {/each}
  </menu>
</button>
<div class="tabs l m">
  {#each Object.entries(locales) as [name, flag]}
    <a
      class:active={$locale == name} 
      onclick={()=>$locale = name}>{flag}</a>
  {/each}
</div>

<label class="switch icon">
  <input type="checkbox" onchange={toggleDarkMode} checked={darkMode}>
  <span>
    <i>light_mode</i>
    <i>dark_mode</i>
  </span>
</label>