<script lang="ts">

  import { onMount } from 'svelte';

  import { location } from 'svelte-spa-router';
  import GenerateUserDisplay from './GenerateUserDisplay.svelte';

  // using location won't work cuz i do a fetch but i don't change the page fragment, so means nothing to location...

  // 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!

  export let aUsername;

  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('Display aUser username: '+ aUsername)
    // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
    user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
      .then( (x) => x.json() );

    console.log('Display a user: ' + user.username)


    // 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>

{#if user !== undefined}
  <GenerateUserDisplay {user}/>
{:else}
  <h2>Sorry</h2>
  <div>Failed to load user {aUsername}</div>
{/if}



<style>

</style>