<script lang="ts">
  import { push } from "svelte-spa-router";
  import { location } from 'svelte-spa-router';

  import active from 'svelte-spa-router/active'
  // or i could leave them all and not display if they're active?


  let handleClickLogout = async () => {
    await fetch('http://transcendance:8080/api/v2/auth/logout', {
        method: 'POST',
      })
      // .then(resp => resp.json)
      // .then((resp) => console.log(resp))
      .then( () => push('/') ) // i think for TS reasons it has to be a func not direclty push('/') or whatever
    console.log('clicked logout header')
  };

</script>


<!-- svelte-ignore a11y-click-events-have-key-events -->
<header>
  <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
  <h1>Potato Pong</h1>
  <nav>
    {#if $location !== '/profile'}
      <button on:click={() => (push('/profile'))}>My Profile</button>
    {:else if $location === '/profile'}
      <button on:click={() => (push('/profile/settings'))}>Settings</button>
    {/if}

    <!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
    <!-- <button on:click={() => (push('/chat'))}>Chat</button> -->

    <!-- tmp -->
    <button on:click={() => (push('/profile/friends'))}>Friends</button>
    <button on:click={() => (push('/test'))}>test</button>
    <button on:click={handleClickLogout}>Log Out</button>
  </nav>
</header>






<style>
  /* See "possible_fonts.css" for more font options... */
  @font-face {
    font-family: 'Bondi';
    src:url('/fonts/Bondi.ttf.woff') format('woff'),
        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
        url('/fonts/Bondi.ttf.eot'),
        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
  }
  

/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */


  header{
    /* background: #f7f7f7; */
    background: #618174;
    /* padding: 20px; */
    margin: 0;
    /* does nothing so far... */
    /* display: flex; */
  }

  header{
    /* for some reason this doesn't do shit! */
    position: sticky;
    /* position: absolute; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

/* Headers */
  h1{
    font-family: 'Bondi';
  }

  h1{
    margin: 0;
    text-align: left;
    /* max-width: 40px; */
    /* this helped with the weird extra space under the image... */
    display: flex;
    justify-self: center;
    align-self: center;
  }

/* Images */

  img{
    cursor: pointer;
    max-width: 40px;
    padding: 7px 20px;
    justify-self: left;
  }

  nav{
    display: flex;
    justify-content: right;
  }

  nav button{
    margin: 7px 20px;
    /* padding: 5px; */
    border-radius: 4px;
  }

  /* .none{

  } */
</style>
