<template>

<div class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
    <transition-group name="fade">
        <div v-for="(note, index) in notifications" :key="index" data-bs-delay="2000" data-bs-autohide="true" class="show fade toast border-0 text-white" :class="toastClasses(note.type)" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                {{note.text}}
            </div>
            <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </transition-group>
</div>

</template>

<script setup lang="ts">
import { useNotifications } from '@/stores/notifications'
import { storeToRefs } from 'pinia'

const notes = useNotifications()
const { notifications } = storeToRefs(notes)

function destroyAlert(index : number) {
    notes.removeAlert(index)
}

function toastClasses(type : string){
    return {
        'bg-danger': type === 'danger',
        'bg-success' : type === 'success',
        'bg-warning' : type === 'warning'
    }
}

</script>

<style scoped>

</style>
