<script lang="ts" setup>
import { useToastStore } from '@/stores/toast'

const toastStore = useToastStore()

function resolveColor(type: string): string {
  const colors: Record<string, string> = {
    success: 'success',
    error: 'error',
    warning: 'warning',
    info: 'info',
  }
  return colors[type] ?? 'info'
}

function resolveIcon(type: string): string {
  const icons: Record<string, string> = {
    success: 'tabler-circle-check',
    error: 'tabler-alert-circle',
    warning: 'tabler-alert-triangle',
    info: 'tabler-info-circle',
  }
  return icons[type] ?? 'tabler-info-circle'
}
</script>

<template>
  <Teleport to="body">
    <div class="toast-stack">
      <TransitionGroup name="toast">
        <VAlert
          v-for="toast in toastStore.toasts"
          :key="toast.id"
          :type="toast.type"
          :color="resolveColor(toast.type)"
          variant="flat"
          closable
          class="toast-item mb-2"
          elevation="8"
          @click:close="toastStore.dismiss(toast.id)"
        >
          <template #prepend>
            <VIcon :icon="resolveIcon(toast.type)" />
          </template>
          {{ toast.message }}
        </VAlert>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
.toast-stack {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
  pointer-events: none;

  > * {
    pointer-events: auto;
  }
}

.toast-enter-active {
  animation: slide-in-right 0.3s ease;
}

.toast-leave-active {
  animation: slide-out-right 0.3s ease;
}
</style>
