<script lang="ts">

  import { onMount } from 'svelte';
  import GenerateUserDisplay from './GenerateUserDisplay.svelte';
  // import {updateGeneratedUser} from './GenerateUserDisplay.svelte';

  export let aUsername;
  let user;

  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: ')
    // console.log({...user})

  })

  // $: {
  //   updateUser(aUsername);
  // }



  const updateUser = async(updatedUser) => {
    console.log('Display Update aUser username: '+ updateUser)
    // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
    user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
      .then( (x) => x.json() );
  };

  // export const updateUser = async(updatedUser) => {
  //   console.log('Display Update aUser username: '+ updateUser)
  //   // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
  //   user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
  //     .then( (x) => x.json() );
  //   updateGeneratedUser(updateUser);

  // };


</script>


<!-- OHHHH i could use #await instead of if and have an nice loading page! -->
{#if user !== undefined}
  <GenerateUserDisplay bind:user={user} primary={true}/>
  <!-- <GenerateUserDisplay user={user} primary={true}/> -->
{:else}
  <h2>Sorry</h2>
  <div>Failed to load user {aUsername}</div>
{/if}


<style>

</style>