<template>
  <div :class="['page-toast-item', type !== undefined ? 'toast-item-' + type : '']">
    <span class="toast-close-btn" @click="CloseToast"></span>
    <span>{{ text }}</span>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useToastStore } from './toastStore'
  const toastStore = useToastStore()

  export interface Props {
    id: number
    text: string
    type: string
    timeout?: number
    show?: boolean
  }
  const props = withDefaults(defineProps<Props>(), {
    type: '',
    timeout: 0,
    show: false
  })
  
  const emit = defineEmits(['update:show'])
  const localTimeout = ref<number>(props.timeout)

  const CloseToast = () => {
    delete toastStore.toasts[props.id]
  }
  onMounted(() => {
    if (localTimeout.value === 0) localTimeout.value = toastStore.toastTimeout

    if (localTimeout.value >= 0) {
      setTimeout(() => {
        CloseToast()
      }, localTimeout.value)
    }
  })
</script>
