<script lang="ts">

  import { onMount } from 'svelte';

  import { location } from 'svelte-spa-router';
  // this is how you access /:first for example
  // export let params = {}
  // <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>

// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
// will have to coordinate with Back, will know more once the Game stats are in the back
// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
// not sure if that's what i want...


  // maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
  // why bother storing that shit in the back...
  // maybe i need a Rank.svelte component
    // ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!

  let user;
  let rank = '';
  let avatar;

  // i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
  // once the async authentication check is done
  onMount( async() => {
    // console.log('mounting profile display')
    user = await fetch('http://transcendance:8080/api/v2/user')
      .then( (x) => x.json() );

    // console.log('profile display did my fetch')
    // should i be updating the userStore or is that unnecessary?

    if (user.loseGame > user.winGame) {
      rank = 'Bitch Ass Loser!'
    } else if (user.loseGame === user.winGame) {
      rank = 'Fine i guess...'
    } else {
      rank = 'Yea you da Boss!'
    }

    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
		  .then(response => {return response.blob()})
		  .then(data => {
		  	const url = URL.createObjectURL(data);
		  	avatar = url;
	  	});

    // tmp
    // console.log('mounted Profile Display')
    // console.log(user);


  })

  // Glittery Stars and such for Rank

  let index = 0, interval = 1000;

  const rand = (min, max) => 
    Math.floor(Math.random() * (max - min + 1)) + min;

  // it's unhappy that "star" isn't typeset, no idea what to do about it...
  const animate = (star) => {
    // the if seems to have fixed the type issue
    if (star) {
      star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
      star.style.setProperty("--star-top", `${rand(-40, 80)}%`);

      star.style.animation = "none";
      star.offsetHeight;
      star.style.animation = "";
    }
  }

  // This is the part i invented, it was kinda a fucking nightmare...
  let stars = [];

  for (let i = 0; i < 3; i++) {
    setTimeout(() => {
      animate(stars[i]);
      
      setInterval(() => animate(stars[i]), 1000);
    }, index++ * (interval / 3))
  }

</script>

<!-- is this if excessive? -->
<div class="outer">
  {#if user !== undefined}
  <main>
    <!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
    <!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
    <img class="avatar" src="{avatar}" alt="default user icon">
    <div class="username">{user.username}</div>
    <div class="rank">Rank: 
      <span class="glitter">
        <span bind:this={stars[0]} class="glitter-star">
          <svg viewBox="0 0 512 512">
          <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
          </svg>
        </span>
        <span bind:this={stars[1]} class="glitter-star">
          <svg viewBox="0 0 512 512">
          <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
          </svg>
        </span>
        <span bind:this={stars[2]} class="glitter-star">
          <svg viewBox="0 0 512 512">
          <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
          </svg>
        </span>
        <span class="glitter-text">{rank}</span>
      </span>
    </div>
    <section class="main-stats">
      <h4>Match Statistics</h4>
      <p>Total: {user.stats.totalGame}</p>
      <p>Victories: {user.stats.winGame}</p>
      <p>Losses: {user.stats.loseGame}</p>
      <p>Draws: {user.stats.drawGame}</p>
    </section>
  </main>
  {/if}
</div>

<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>




<style>

  div.outer{
    max-width: 960px;
    margin: 40px auto;
  }

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

/* Normal CSS stuff */
  .avatar{
    max-width: 150px;
    /* padding: 5px; */
  }

/* 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;
  }

  div.username{
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 5px;
  }

  div.rank {
    /* color: black; */
    font-size: 1.2em;
    font-weight: bold;
  }


  /* Glittery Star Stuff */


  :root {  
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
    /* make shit gold? */
  }

  @keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
  }

  @keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
  }


  div > .glitter {
    display: inline-block;
    position: relative;
  }

  div > .glitter > .glitter-star {
    --size: clamp(20px, 1.5vw, 30px);

    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }

  div > .glitter > .glitter-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }

  div > .glitter > .glitter-star > svg > path {
    fill: var(--violet);
  }

  div > .glitter > .glitter-text {
    animation: background-pan 3s linear infinite;
    /* background-image: linear-gradient( */
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    
    /* Keep these for Safari and chrome */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* These are for Firefox */
    background-clip: text;
    color: transparent;

    white-space: nowrap;
  }

</style>