<script>
import { Toast } from 'spaper';

const positions = [ ... ]
const types = [ ... ]
let title = ''
let message = 'hey'
let duration = 2
let type = 'success'
let position = 'top-right'
let pauseOnHover = false
let dismissible = false
let indefinite = false
let hideIcon = false

function displayToast() {
  Toast.open({
    hideIcon,
    title,
    message,
    type,
    duration: duration * 1000,
    position,
    pauseOnHover,
    dismissible,
    indefinite,
  })
}
</script>

<div>
  <Input label="title" bind:value={title} />
  <Input label="message" bind:value={message} />
  <NumberInput label="duration (seconds)" bind:value={duration} />
  <Select bind:value={type} label="type">
    {#each types as t}
      <option value={t}>{t}</option>
    {/each}
  </Select>
  <Select bind:value={position} label="position">
    {#each positions as p}
      <option value={p}>{p}</option>
    {/each}
  </Select>
  <Checkbox bind:checked={pauseOnHover} label="Pause on hover" />
  <Checkbox bind:checked={dismissible} label="Dismissible" />
  <Checkbox bind:checked={hideIcon} label="Hide icon" />
  <Checkbox bind:checked={indefinite} label="indefinite" />

  <Button onclick={displayToast} type="secondary">
    go
  </Button>
</div>

<script>
import { Toast } from 'spaper';
import { Bell } from 'spaper/icons';
</script>

{#snippet saved(close)}
  <div class="flex flex-col gap-2">
    File <strong>notes.txt</strong> deleted
    <Button onclick={close}>Undo</Button>
  </div>
{/snippet}

<Button onclick={() => Toast.open({ icon: Bell, content: saved, duration: 5000 })}>
  Delete
</Button>

<script>
import { Toast } from 'spaper';
</script>

<Button type="secondary"
        onclick={() => Toast.info("Something quite neutral, I don't know")}>
  Show
</Button>
<Button type="success"
        onclick={() => Toast.success('Transaction confirmed!')}>
  Show
</Button>
<Button type="warning"
        onclick={() => Toast.warning('Be careful with that')}>
  Show
</Button>
<Button type="danger"
        onclick={() => Toast.danger('Something went wrong :(')}>
  Show
</Button>