<script>
  import Icon from "$/client/components/Icon.svelte";
  import { fade } from "svelte/transition";
  let bottom=true;
  let top=false;
  let right=true;
  let left=false;
  let active=true;
  let reverse = false;

  let toasts = ["Toast 1"];

  const add_toast = () => {
    toasts.push(`Toast ${toasts.length + 1}`);
    toasts = toasts;
  }
</script>

<span on:click={ add_toast}><Icon name="plus" size="48" /></span>
<span on:click={ () => left = !left }><Icon name="arrow-left" size="48" inactive={!left} /></span>
<span on:click={ () => right = !right }><Icon name="arrow-right" size="48" inactive={!right} /></span>
<span on:click={ () => bottom = !bottom }><Icon name="arrow-down" size="48"  inactive={!bottom}/></span>
<span on:click={ () => top = !top }><Icon name="arrow-up" size="48"  inactive={!top}/></span>

  <span on:click={ () => reverse = !reverse }><Icon name={ reverse ? "chevrons-up" : "chevrons-down" } size="48" /></span>


<toast-list class:bottom class:top
            class:left class:right class:active class:reverse>
  {#each toasts as toast}
  <toast transition:fade|local>
    <span>{ toast }</span>
  </toast>
  {/each}
</toast-list>
