<script  context="module">
    import {fade} from 'svelte/transition';
    import { writable } from 'svelte/store';


    let toasts = writable([])

    export function addToast (type, message="") {
        if (message == "") {
            message = toast_states[type]["text"]
        }
        toasts.update((all) => [{"class" : toast_states[type]["class"], "text": message}, ...all]);
        toasts = toasts;
        setTimeout(() => {
            toasts.update((all) => all.slice(0, -1));
        }, 2000);
    }



    const toast_states = {
      'success' : {class: 'alert-success', text: 'Article updated successfully'},
      'error' : {class: 'alert-error', text: 'Article update failed'},
    }

</script>

<div class="toast">
    {#each $toasts as toast}
        <div class="alert { toast.class }" transition:fade>
            <div> <span>{ toast.text }.</span> </div>
        </div>
    {/each}
</div>
