{{--

INPUTS:
message: string|required
?type: success|error|info - defaults to info
?title: string|nullable


PHP
---------
return redirect()
    ->back()
    ->with([
        new ToastMessage(
            'Successfully Done something!', // message
            'success',                      // type
            'My title'                      // title
        )
    ]);


Javascript - alpine
--------------------
this.$dispatch('addtoast', {
    message: 'testing testing'
    type: 'success',
});


Javascript - vanilla
--------------------
window.dispatchEvent(new CustomEvent("addtoast", { detail: { message: 'Hello there' } });


--}}


@php
    $toast = session('toast');
@endphp


<div
    @addtoast.window="addToast"
    x-data="{
        queue: [],

        init() {
            @if(!empty($toast))
                this.$nextTick(()=>this.$dispatch('addtoast', @js($toast)));
            @endif

{{--            Testing --}}
{{--            this.$nextTick(()=>{--}}
{{--                this.$dispatch('addtoast', {message:'hello there'});--}}
{{--                setTimeout(()=>this.$dispatch('addtoast', {message:'hello there', type:'success'}), 2000);--}}
{{--                setTimeout(()=>this.$dispatch('addtoast', {message:'hello there', type:'error'}), 4000);--}}
{{--            });--}}
        },

        addToast(event) {
            let id = Math.floor((Math.random() * 9999999) + 1000000);
            let type = event.detail.type ? event.detail.type : 'info';

            this.queue.push({
                id: id,
                message: event.detail.message,
                type: type,
                title: event.detail.title ? event.detail.title : type[0].toUpperCase``+type.substring(1),
                show: false
            });

            this.animateInOut(id);
        },

        animateInOut(id) {
            let found = this.queue.find((item)=>item.id === id);

            // animate in
            this.$nextTick(()=>{
                setTimeout(()=>found.show = true, 200);
            })

            // animate out
            setTimeout(() =>{
                if(found !== undefined) {
                    found.show = false;
                    setTimeout(() =>this.queue = this.queue.filter((item)=>item.id!==id), 200);
                }
            }, 8000)
        },

        backgroundColor(type) {
            switch (type) {
              case('success'): return 'bg-success-dark';
              case('error'): return 'bg-error-dark';
              case('info'):
              default:
              return 'bg-info-dark';
            }
        }
    }"
    class="fixed bottom-0 left-0 sm:left-auto w-full sm:max-w-md px-8 pb-8 flex flex-col gap-4 right-0"
>
    <template x-for="toast in queue" :key="toast.id">
        <div
            x-show="toast.show"
            x-transition.duration.200ms
        >
            <div class="py-3 pl-4 pr-6 rounded text-white shadow-md border border-white/20" :class="`${backgroundColor(toast.type)}`">
                <div class="flex gap-3 w-full">
                    <x-icon x-show="toast.type==='info'" name="info" size="1.3em" class="text-white mt-0.5" />
                    <x-icon x-show="toast.type==='success'" name="success" size="1.3em" class="text-white mt-0.5" />
                    <x-icon x-show="toast.type==='error'" name="error" size="1.3em" class="text-white mt-0.5" />
                    <div>
                        <div class="font-bold" x-text="toast.title"></div>
                        <div x-text="toast.message"></div>
                    </div>
                </div>
{{--                <button @click="close(toast.id)">test</button>--}}
            </div>
        </div>
    </template>
</div>