<script>
  import './header.css';
  import Button from './Button.svelte';
  import Image from './Image.svelte';
  import { hasSession } from '../utils/stores.js';
  import { onMount } from 'svelte';

  import { createEventDispatcher } from 'svelte';

  let user = null;
  onMount(async () => {
    user = hasSession();
  });

  const dispatch = createEventDispatcher();

  let avatarUrl = '';

  function onLogin(event) {
    dispatch('login', event);
  }
  function onLogout(event) {
    dispatch('logout', event);
  }

  function redirect(url) {
    return () => {
      window.location.pathname = url;
    };
  }
</script>

<header>
  <div class="wrapper">
    <div>
      <Image src="./clipboard.svg" on:click={redirect('/')} />
      <h1>Todo</h1>
    </div>
    <div>
      {#if user}
        <Image src={avatarUrl} alt="user profile picture" on:click={redirect('/settings')} />
        <Button size="small" on:click={onLogout} label="Log out" />
      {/if}
      {#if !user}
        <Button size="small" on:click={onLogin} label="Log in" />
      {/if}
    </div>
  </div>
</header>
