<template>
  <q-dialog
    v-model="visible"
    maximized
    persistent
    transition-show="slide-up"
    transition-hide="slide-down">
    <div 
      class="flex items-center justify-center fullscrean-card column"
      >
      <q-icon :name = "icon" color="brand" size="160px"/>
      <div class="text-h5 q-mb-lg">
          {{ $t(message1) }}
      </div>

      <div
        v-if="message2" 
        class="absolute-bottom q-py-lg flex justify-center row"
        >
        {{ $t(message2) }}
      </div>
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps<{
  icon: string
  message1: string
  message2?: string
  routeName: string
}>()

const visible = ref(false)
const router = useRouter()
const timers = ref<number[]>([])

const setupTimers = () => {
  visible.value = true
  
  const timer1 = window.setTimeout(() => {
    visible.value = false
    
    const timer2 = window.setTimeout(() => {
      router.push({ name: props.routeName })
    }, 300)
    
    timers.value.push(timer2)
  }, 2000)

  timers.value.push(timer1)
};

const clearTimers = () => {
  timers.value.forEach(timer => clearTimeout(timer))
  timers.value = []
}

onMounted(setupTimers)
onUnmounted(clearTimers)
</script>

<style lang="scss" scoped>
  .fullscrean-card {
    background-color: white;
  }

</style>


