<script lang="ts">
  import Canvas from "../pieces/Canvas.svelte";
  import { push } from "svelte-spa-router";
  import { onMount } from 'svelte';
  import { get } from "svelte/store";


  let user;

	onMount(async () => {
    user = await fetch('http://transcendance:8080/api/v2/user')
      .then((resp) => resp.json())

    // i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother

      console.log('User var');
      console.log(user);
      // if (user && user.statusCode && user.statusCode === 403) {
      //   console.log('user not logged in')
      // }
      // if (user && user.username) {
      //   console.log('we have a user');
      // }

    // user === undefined doesn't work cuz we declared user in the scope of onMount
    // if (user === undefined) {
    if (user && user.statusCode && user.statusCode === 403) {
      console.log('on mount no user, returned status code 403 so logging out of userStore')
      // userLogout(); // which i think should delete any previous local storage
    }

	});

  const login = async() => {
    window.location.href = 'http://transcendance:8080/api/v2/auth';
    console.log('you are now logged in');
  }

// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
// we could .then( () => replace('/') ) need the func so TS compatible...
  const logout = async() => {
		await fetch('http://transcendance:8080/api/v2/auth/logout', {
        method: 'POST',
      });
    user = undefined;
	};

</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<header class="grid-container">
  <h1>Potato Pong</h1>
  <nav>
    <!-- {#if user !== undefined} -->
    {#if user && user.username}
      <div on:click={ () => (push('/profile')) }>Profile</div>
      <div on:click={logout}>Logout</div>
    {:else}
      <div on:click={login}>Login</div>
    {/if}
  </nav>
  <h2>
    <div>Welcome to</div>
    <div>Potato Pong</div>
  </h2>
</header>

<Canvas/>

<!-- doesn't work :( -->
<!-- <svelte:body style="overflow-y: hidden"/> -->

<style>

  /* :global(body) {
    overflow-y: hidden;
  } */


  header {
    /* didn't work... */
    overflow-y: hidden;
  }


  /* The actually important stuff */

  .grid-container{
    position: absolute;
    left: 0;
    top: 0;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* max-height: 100%; */
    white-space: nowrap;
    /* padding-bottom: 0; */
    margin-bottom: 0px;
    overflow: hidden;
    padding: 20px 40px;
    margin: 0px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
  }

  header h1{
    grid-column: 1 / 7;
    grid-row: 1;
    /* grid-column: span 6; */
    /* tmp? */
    padding: 20px;
    border: 1px solid bisque;
  }
  header nav{
    /* make it a flexbox? */
    grid-column: 7 / 13;
    grid-row: 1;
    justify-self: end;
    /* tmp? */
    padding: 20px;
    border: 1px solid bisque;
  }

  header h2{
    grid-row: 3;
    grid-column: 5 / span 4;
    justify-self: center;
    /* tmp */
    border: 1px solid black;
    z-index: 3;
  }
  header h2 div{
    font-size: 2em;
    /* color: red; */
  }

  nav div {
    display: inline;
    color: bisque;
    font-weight: bold;
  }
  nav > div {
    padding-left: 1em;
    /* didn't quite work, applies to both for some reason */
    /* nav:first-child doesn't work either*/
  }
  nav div:hover{
    text-decoration: underline;
    cursor: pointer;
  }

</style>
