<script>
  import { onMount } from "svelte";
  import Blue from "./icons/Blue.svelte";
  import White from "./icons/White.svelte";
  import Black from "./icons/Black.svelte";
  import Colorless from "./icons/Colorless.svelte";
  import Red from "./icons/Red.svelte";
  import Green from "./icons/Green.svelte";
  import IconBase from "./icons/IconBase.svelte";
  import SearchIcon from "./icons/SearchIcon.svelte";
  import DeckIcon from "./icons/DeckIcon.svelte";
  import MenuIcon from "./icons/MenuIcon.svelte";
  import Accordion from "./Accordion.svelte";

  let openMobileMenu = $state(false)

  let username = $state("")

  let brawlsets = $state([])
  let isLoggedIn = $state(false)

  onMount( async () => {
        const storageData = window.localStorage.getItem("pocketbase_auth")
        if (storageData != null) {
          const jsonData = JSON.parse(storageData)
          username = jsonData.record.name
          isLoggedIn = true
        }

        fetch("/json/misc/brawlsets")
            .then( response => response.json() )
            .then( data => { brawlsets = data; console.log(data) } )
    });
  
</script>

<div class="fixed top-0 bg-white font-inter-tight flex flex-row justify-between w-screen p-4 h-16">
  <a class="flex flex-row gap-2 items-center" href="/">
    <img alt="brawlset website logo" src="/assets/logo.png" class="h-8" />
    <span class="font-beleren text-3xl mt-2 bg-gradient-to-r from-black to-orange-500 bg-clip-text text-transparent">BrawlSet</span>
  </a>
  <div class="hidden flex-row gap-4 items-center md:flex">
    <details class="dropdown w-0 md:w-fit">
      <summary role="button">
        <a class="cursor-pointer text-stone-500">Commandants</a>
      </summary>
      <ul>
        <li><a href="/top/commander/all">Top commandants</a></li>
        <li>
          <div>Mono</div>
          <ul>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/white"><White/><span>Blanc</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><Colorless/><span>Incolor</span></a></li>
          </ul>
        </li>
        <li>
          <div>2 couleurs</div>
          <ul>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/azorius"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/dimir"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/rakdos"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/gruul"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/selesnya"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/orzhov"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/izzet"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/golgari"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/boros"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/simic"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
          </ul>
        </li>
        <li>
          <div>3 couleurs</div>
          <ul>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/esper"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/grixis"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/jund"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/naya"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/bant"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/abzan"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/jeskai"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/sultai"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/mardu"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/temur"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
          </ul>
        </li>
        <li>
          <div>4+ couleurs</div>
          <ul>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/yore-tiller"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/glint-eye"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/dune-brood"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/ink-treader"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/witch-maw"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
            <li><a class="flex flex-row items-center gap-2" href="/top/commander/five-colors"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
          </ul>
        </li>
      </ul>
    </details>
    <details class="dropdown">
      <summary role="button">
        <a class="cursor-pointer text-stone-500">BSets</a>
      </summary>
      <ul>
        {#each brawlsets.slice(0,5) as brawlset}
          <li>
            <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
              <div class="flex flex-row gap-1">
                {#each brawlset.IconsSvgUri as icon}
                  <IconBase src={icon} alt="brawlset icon"/>
                {/each}
              </div>
              {brawlset.Name}
            </a>
          </li>
        {/each}
        <li><a href="/bset/all">Plus de BSets...</a></li>
      </ul>
    </details>
    <a class="cursor-pointer text-stone-500" href="/regles">Règles</a>
    <a class="cursor-pointer text-stone-500" href="/faq">F.A.Q</a>
  </div>
  <div class="flex flex-row gap-4 items-center text-stone-500">
    <button class="flex flex-row items-center cursor-pointer" onclick={() => dialog.showModal()}>
      <SearchIcon class="visible w-fit  md:invisible md:w-0" />
      <span class="invisible w-0 md:w-fit md:visible">Rechercher</span>
    </button>
    {#if isLoggedIn}
      <a class="cursor-pointer flex flex-row items-center" href="/decks">
        <DeckIcon  class="visible w-fit  md:invisible md:w-0" />
        <span class="invisible w-0 md:w-fit md:visible">Decks</span>
      </a>
      <a class="cursor-pointer hidden md:inline" href="/profil">{username}</a>
    {:else}
      <a class="cursor-pointer hidden md:block" href="/connexion">Connexion</a>
      <a class="cursor-pointer hidden md:block" href="/inscription">Inscription</a>
    {/if}

    <label class="relative z-40 cursor-pointer block md:hidden" for="mobile-menu">
      <input class="peer hidden" bind:checked={openMobileMenu} type="checkbox" id="mobile-menu" />
      <MenuIcon />
      <div class="fixed inset-0 z-40 hidden h-full w-full peer-checked:block">
        &nbsp;
      </div>
      <div onclick={(e) => {if(e.target.nodeName == "A") {openMobileMenu = false}}} class="fixed top-16 left-0 z-40 h-fit w-screen hidden peer-checked:block bg-white p-4 shadow-md">
        <ul class="w-full flex flex-col items-center gap-4">
          <li>
            <Accordion title="Commandants">
              <ul class="w-full">
                <li><a href="/top/commander/all">Top commandants</a></li>
                <li>
                  <Accordion title="Mono">
                    <ul>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/white"><White/><span>Blanc</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><Colorless/><span>Incolor</span></a></li>
                    </ul>
                  </Accordion>
                </li>
                <li>
                  <Accordion title="2 couleurs">
                    <ul>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/azorius"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/dimir"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/rakdos"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/gruul"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/selesnya"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/orzhov"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/izzet"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/golgari"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/boros"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/simic"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
                    </ul>
                  </Accordion>
                </li>
                <li>
                  <Accordion title="3 couleurs">
                    <ul>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/esper"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/grixis"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/jund"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/naya"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/bant"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/abzan"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/jeskai"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/sultai"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/mardu"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/temur"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
                    </ul>
                  </Accordion>
                </li>
                <li>
                  <Accordion title="4+ couleurs">
                    <ul>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/yore-tiller"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/glint-eye"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/dune-brood"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/ink-treader"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/witch-maw"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
                      <li><a class="flex flex-row items-center gap-2" href="/top/commander/five-colors"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
                    </ul>
                  </Accordion>
                </li>
              </ul>
            </Accordion>
          </li>
          <li>
            <Accordion title="BSet">
              <ul>
                {#each brawlsets.slice(0,5) as brawlset}
                  <li>
                    <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
                      <div class="flex flex-row gap-1">
                        {#each brawlset.IconsSvgUri as icon}
                          <IconBase src={icon} alt="brawlset icon"/>
                        {/each}
                      </div>
                      {brawlset.Name}
                    </a>
                  </li>
                {/each}
                <li><a href="/bset/all">Plus de BSets...</a></li>
              </ul>
            </Accordion>
          </li>
          <li><a href="/regles">Règles</a></li>
          <li><a href="/faq">F.A.Q</a></li>
          <li><div class="max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
          {#if isLoggedIn}
            <li><a href="/profil">{username}</a></li>
          {:else}
            <li><a href="/connexion">Connexion</a></li>
            <li><a href="/inscription">Inscription</a></li>
          {/if}
        </ul>
      </div>
    </label>
  </div>
</div>

<style>
  /* Close the dropdown with outside clicks */
  .dropdown > summary::before {
    display: none;
  }

  .dropdown[open] > summary::before {
    content: ' ';
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .dropdown summary {
    list-style: none;
    list-style-type: none;
  }

  .dropdown ul {
    white-space: nowrap;
    position: absolute;
    margin-top: 5px;
    padding: 5px;
    box-sizing: border-box;
    z-index: 2;
    
    background-color: white;
    border-radius: 5px;
    border: 1px solid #D3D3D3;
    box-shadow: 0px 4px 5px #D3D3D3;
    list-style: none;
  }

  .dropdown li {
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
  }

  .dropdown ul ul {
    display: none;
    left: 100%;
    position: absolute;
    top: 0;
  }

  .dropdown li:hover {
    background-color: hsl(240 4.8% 95.9%);
  }

  .dropdown li:hover > ul {
    display: block;
  }
</style>
