<template>
  <v-app theme="dark">
    <v-snackbar-queue
      ref="queue"
      v-model="messages"
      gap="12"
      location="top end"
      max-width="400"
      timer-color="on-surface"
      total-visible="4"
      transition="slide-auto"
      closable
      collapsed
      timer
    >
      <template #header="{ item }">
        <div v-if="item.header" class="d-flex text-body-small pa-3 pb-0">
          <div class="text-uppercase">{{ item.header.provider }}</div>
          <v-spacer />
          <div>{{ item.header.when }}</div>
        </div>
      </template>
      <template #actions="{ item, props }">
        <v-icon-btn
          v-if="!item.vertical"
          aria-label="Close"
          icon="$close"
          variant="text"
          v-bind="props"
        />
        <v-btn
          v-else
          text="Close"
          variant="text"
          v-bind="props"
        />
      </template>
    </v-snackbar-queue>
    <v-container class="d-flex ga-3 justify-center">
      <v-btn
        text="Promise"
        @click="simulateTask"
      />
      <v-btn
        text="Clear"
        @click="queue?.clear()"
      />
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
  import { SnackbarQueueMessage } from '@/types'
  import type { VSnackbarQueue } from '@/components/VSnackbarQueue'

  const messages = ref<SnackbarQueueMessage[]>([])
  const queue = useTemplateRef<VSnackbarQueue>('queue')

  onMounted(() => {
    setTimeout(() => {
      messages.value.push({
        title: 'Notice',
        text: 'Inbox check... please wait.',
        color: 'info',
        loading: true,
      })
    }, 300)
    setTimeout(() => {
      messages.value.push({
        prependIcon: 'mdi-inbox-arrow-down',
        title: 'Inbox',
        text: 'You have 3 new messages in your Inbox. Click here to review them before they expire.',
        color: 'primary',
        vertical: true,
      })
    }, 700)
    setTimeout(() => {
      messages.value.push({
        prependIcon: '$complete',
        title: 'Done',
        text: 'Task submitted.',
        color: 'success',
      })
    }, 1200)
    setTimeout(() => {
      messages.value.push({
        title: 'Session Warning',
        text: 'Your session will expire in 5 minutes. Please save any unsaved changes to avoid losing your work.',
        color: 'warning',
        vertical: true,
        timeout: 2000,
      })
    }, 1700)
    setTimeout(() => {
      messages.value.push({
        prependIcon: '$error',
        text: 'Task failed successfully.',
        color: 'error',
        timeout: -1,
      })
    }, 2200)
    setTimeout(() => {
      messages.value.push({
        header: {
          provider: 'Signal',
          when: '2 min ago',
        },
        prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
        title: '@marley4122',
        text: 'The reproduction is missing. Would you...',
        timeout: -1,
      })
    }, 2600)
  })

  onBeforeUnmount(() => {
    messages.value = []
  })

  let attempt = 0

  function simulateTask () {
    const uploadPromise = new Promise((resolve, reject) =>
      setTimeout(() => {
        attempt++ % 2
          ? resolve('2 files uploaded')
          : reject(new Error('Server not reachable'))
      }, 3000)
    )

    messages.value.push({
      text: 'Loading...',
      promise: uploadPromise,
      success: (data: any) => ({
        prependIcon: '$complete',
        title: 'success',
        text: data,
        color: 'success',
        timer: true,
      }),
      error: (data?: Error) => ({
        prependIcon: '$error',
        title: 'Error',
        text: `Operation failed: ${data?.message}`,
        color: 'error',
        closable: true,
        timeout: -1,
      }),
    })
  }
</script>

<style>
.v-snackbar__wrapper {
  &[class*="-transition-enter-active"],
  &[class*="-transition-leave-active"] {
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  &.slide-x-transition-enter-from,
  &.slide-x-transition-leave-to {
    transform: translateX(-30%);
  }
  &.slide-x-reverse-transition-enter-from,
  &.slide-x-reverse-transition-leave-to {
    transform: translateX(30%);
  }
}
</style>