<script setup lang="ts">

// type

type Props = {
    id: number;
    message: string,
    description?: string
}

// props

const props = defineProps<Props>();
const { id } = toRefs(props);

// state

const { destroyToast } = useToast();

const open = ref(true);

// method

const onSwipeEnd = () => {
    setTimeout(() => {
        destroyToast(id);
    }, 1000);
}

// watch

watch(() => open.value, (value) => {
    if (!value) onSwipeEnd()
});

// lifecycle

onMounted(() => {
    setTimeout(() => {
        open.value = false;
    }, 4000);
});

</script>

<template>
    <ToastRoot
        @swipeEnd="onSwipeEnd"
        v-model:open="open"
        class="bg-white rounded-lg shadow-xl shadow-black/5 border-[0.5px] border-black p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
    >
        <ToastTitle class="[grid-area:_title] mb-[5px] font-medium text-black text-sm">
            {{ message }}
        </ToastTitle>
        <ToastDescription v-if="description" as-child>
            <div
                class="[grid-area:_description] m-0 text-black leading-[1.3]"
            >
                {{ description }}
            </div>
        </ToastDescription>
    </ToastRoot>
</template>