<script setup lang="ts">
import { onMounted, ref } from 'vue'

import type { ProjectList } from 'src/types/projects/projectList'
import type { ProjectListingInfo } from 'src/types/projects/project'
import { type ProjectListDefinition } from 'content/routes.js'
import { fetchAndParseYaml } from 'src/utilities/fetch'
import { getCurrentRoute } from 'src/utilities/vuetils'
import { useRouteStore } from 'src/routes'

import ProjectTile from 'src/components/projects/project-tile.vue'

const projectIds = ref([] as string[])
const projects = ref({} as { [key: string]: ProjectListingInfo })
const ready = ref(false)
const currentRoute = getCurrentRoute()
const routeStore = useRouteStore()
const routeConfig = routeStore._routes[currentRoute.path] as ProjectListDefinition

onMounted(async () => {
  const config = await fetchAndParseYaml<ProjectList>(routeConfig.config)
  projectIds.value = Object.keys(config.projects)
  for (let i = 0; i < projectIds.value.length; ++i) {
    const id = projectIds.value[i]
    projects.value[id] = await fetchAndParseYaml(config.projects[id].config)
  }
  ready.value = true
})
</script>

<template lang="pug">
.template.project-list
  #projects(
    v-if='ready'
  )
    ProjectTile(
      v-for='id in projectIds'
      :id='id'
      :info='projects[id]'
    )
</template>

<style scoped lang="sass">

</style>