<script setup lang="ts">
import { type Component, computed, onMounted, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import TestRootView from '@/views/TestRootView.vue'
import StatRootView from '@/views/StatRootView.vue'
import HelloWorld from '@/views/HelloWorld.js'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import IssuesRootView from '@/views/IssuesRootView.vue'
import ProjectRootView from '@/views/ProjectRootView.vue'
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'
})

const components: { [key: string]: Component } = {
  stat: StatRootView,
  projects: ProjectRootView,
  issues: IssuesRootView,
  tests: TestRootView,
}

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

onMounted(async () => {
  // await projectsStore.findById(122)
})
</script>

<template>
  <default-layout>
    <template v-slot:default="{ component }">
      <component :is="components[component]" />
      <hello-world />
    </template>
  </default-layout>
  <!--  <component :is="layout">-->
  <!--    <router-view v-slot="{ Component, route }">-->
  <!--      <div :key="route.name">-->
  <!--        <component :is="Component" />-->
  <!--      </div>-->
  <!--    </router-view>-->
  <!--  </component>-->
</template>
