<script setup lang="ts">
import { computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useIssuesStore } from '@/stores/issues.ts'
import { useStatusesStore } from '@/stores/statuses.ts'
import { useProjectsStore } from '@/stores/projects.ts'

const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore()
const projectsStore = useProjectsStore()

const route = useRoute()

const layout = computed(() => {
  const layout = route?.meta?.layout
  return layout ? `${layout}Layout` : 'DefaultLayout'
})

watchEffect(async () => await projectsStore.findAll())
watchEffect(async () => await statusesStore.findAll())
watchEffect(async () => await issuesStore.findAll())
</script>

<template>
  <component :is="layout">
    <router-view v-slot="{ Component, route }">
      <div :key="route.name">
        <component :is="Component" />
      </div>
    </router-view>
  </component>
</template>
