<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useTabStore } from '@/pinia/tab'
import HomeEntryView from '@/components/views/HomeEntryView.vue'
import Tab from '@/layout/tab.vue'
import { waitForHydration } from '@/pinia/Plugin/indexdb'

const tabStore = useTabStore()
const isReady = ref(false)

const showHomeEntry = computed(() => !tabStore.hasCompletedSetup)

const handleImportComplete = () => {
  tabStore.hasCompletedSetup = true
}

onMounted(() => {
  window.addEventListener('home-import-selected', handleImportComplete)
  waitForHydration('tabs').then(() => {
    isReady.value = true
  })
})
</script>

<template>
  <template v-if="isReady">
    <HomeEntryView v-if="showHomeEntry" />
    <Tab v-else />
  </template>
</template>
