<script setup>
import AppIcon from './AppIcon.vue';
import { useToasts } from '../composables/useToasts';

/** Renders the toaster queue. Mounted once, at the end of the app. */
const { toasts, dismiss, pause, resume } = useToasts();
</script>

<template>
    <div class="toast-host no-print" role="region" aria-label="বার্তা">
        <TransitionGroup name="toast">
            <div v-for="toast in toasts" :key="toast.id"
                 class="toast" :class="`toast-${toast.type}`"
                 role="status" :aria-live="toast.type === 'error' ? 'assertive' : 'polite'"
                 @mouseenter="pause(toast.id)"
                 @mouseleave="resume(toast.id)">
                <span class="toast-icon">
                    <AppIcon :name="toast.icon" :size="18"/>
                </span>

                <div class="toast-body">
                    <p class="toast-message">
                        {{ toast.message }}
                        <span v-if="toast.repeat > 1" class="toast-repeat tabular">×{{ toast.repeat }}</span>
                    </p>
                    <ul v-if="toast.details.length" class="toast-details">
                        <li v-for="(detail, index) in toast.details" :key="index">{{ detail }}</li>
                    </ul>
                </div>

                <button type="button" class="toast-close" aria-label="বার্তা বন্ধ করুন" @click="dismiss(toast.id)">
                    <AppIcon name="x" :size="15"/>
                </button>

                <!-- keyed on repeat so a repeated message restarts the countdown bar -->
                <span v-if="toast.timeout" :key="toast.repeat" class="toast-progress"
                      :class="{ 'is-paused': toast.paused }"
                      :style="{ '--toast-duration': `${toast.timeout}ms` }"/>
            </div>
        </TransitionGroup>
    </div>
</template>
