<script lang="ts">

// The User Page can have several Flavors ?
// like a HomePage vibe, and an AccountPage vibe or whatever, but we'll still be serving this page just with diff props

  import UserStore from "./UserStore";
  import Header from "../components/Header.svelte";
  import Footer from "../components/Footer.svelte";
  import { createEventDispatcher } from "svelte";
  import { loginStatus } from '../stores/loginStatusStore';
    import { push } from "svelte-spa-router";

  let dispatch = createEventDispatcher();

// i fucking hate these vars, the will have to go
  export let pages;
  export let currentPage;
  export let userId;

// This shit is so redundant...
  let types = ['home', 'account']
  export let currentType = 'account';

// this is also stupid...
  let sidebar = true;


  // would i prefer to forward this?
  let clickedHome = () => {
    console.log('clicked home');
    // do something...
    currentType = 'home';
  };

  let clickedLogout = async() => {
    console.log('clicked logout');
    await fetch('http://transcendance:8080/api/v2/auth/logout',);
		// $loginStatus = false;
    // maybe use replace() ?
    push('/');
  };

// All the variables that will eventually be replaced by the real values

  let username = 'Username';
  let games = { total: 7, won: 4, lost: 3};
  let rank = 'gold or whatever the fuck who cares...';


</script>

<!-- remove ={clickedHome} if you want to forward the event to App.svelte-->
<!-- god this is some gross code... -->
<Header on:clickedHome={clickedHome} currentType="{currentType === 'home' ? 'home' : 'regular'}" on:clickedLogout={clickedLogout}/>

<!-- The Wave -->
<!-- <div class="spacer layer1"></div> -->

<!-- this is the thing that will let me offset -->
<div class='{sidebar ? "main-grid" : "none"}'>
  {#if sidebar}
    <section class="sidebar">
      <p>i am a sidebar</p>
    </section>
  {/if}

  <main class:offset={sidebar}>
    <!-- what the fuck do we even want in here? messges, about the user, STATISTICS!!! -->
    <!-- <div>some stuff goes here</div> -->
    <img class="icon" src="img/default_user_icon.png" alt="default user icon">
    <div>{username}</div>
    <div>Rank: {rank}</div>
    <section class="main-stats">
      <h4>Match Statistics</h4>
      <p>Total: {games.total}</p>
      <p>Victories: {games.won}</p>
      <p>Losses: {games.lost}</p>
    </section>
  </main>

</div>

<Footer />


<style>



/* from Haikei */
  /* for any Haikei image */
  .spacer{
    aspect-ratio: 900/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  /* the specific image we use, you need both classes */
  .layer1{
    background-image: url('/img/wave-haikei.svg');
  }

  div.main-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* max-height: calc(100vh - 30vh); */
    height: 85vh;
  }

  section.sidebar{
    grid-column: 1 / span 2;
    background: white;
  }

/* The main part */
  main{
    max-width: 960px;
    margin: 40px auto;
    text-align: center;
  }

  main.offset{
    grid-column: 3 / span 10;
  }

/* Normal CSS stuff */
.icon{
    max-width: 150px;
  }

/* The variable rich section */
  section.main-stats{
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    /* i think i want to use a grid? */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* not sure about this, maybe top should be larger? */
    grid-template-rows: repeat(3, 1fr);
  }

/* the  stuff in the grid*/
  section.main-stats h4{
    grid-column: 1 / span 3;
  }

</style>