<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"
      >
      <div
        id="icon-wrapper" 
        :style="{ position: 'relative', height: size + 'px', width: size + 'px'}"
        >
        <div class="animation icon-position"></div>
        <transition
          appear
          enter-active-class="animated zoomIn slow"
         >
          <q-icon
            v-if="showIcon"
            :name = "icon"
            color="brand"
            size="160px"
            class="icon-position"
          />
        </transition>
      </div>
      <div class="text-h5 q-mb-lg q-mx-md" align="center">
          {{ $t(message1) }}
      </div>

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

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

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

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

const setupTimers = () => {
  visible.value = true
  const timer1 = window.setTimeout(() => {
    showIcon.value = true
  }, 300)
  timers.value.push(timer1)
  const timer2 = window.setTimeout(() => {
    visible.value = false
    showIcon.value = false
  }, 2000)
  timers.value.push(timer2)
}

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

watch(visible, async (newVal) => {
  if (newVal === false) await router.push({ name: props.routeName })
})

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

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

  @property --percentage {
  initial-value: 0%;
  inherits: false;
  syntax: "<percentage>";
}
 
.animation {
  background: conic-gradient(transparent var(--percentage), white 0);
  width: 100%;
  height: 100%;
  animation: timer 1s linear;
  animation-fill-mode:forwards;
  z-index: 10;
  position: absolute;
}
 
@keyframes timer {
  to {
    --percentage: 100%;
  }
}

.icon-position {
  position: absolute;
  top:0;
  left:0;
}

</style>
