<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import type { 
  ProjectList,
  ProjectListingInfo,
  ProjectListDefinition,
} from '@goldenwere/mackenzii-types'

import { fetchAndParseYaml } from 'src/utilities/fetch'
import { getCurrentRoute } from 'src/utilities/vuetils'
import { useRouteStore } from 'src/routes'

import FilterPanel from 'src/components/shared/filter-panel.vue'
import ProjectTile from './project-tile.vue'

/**
 * A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
 * in order for the app to effectively display the entries.
 */
 type ProjectDisplayedEntries = { [idOrTitle: string]: ProjectListingInfo & {
  /**
   * specifies whether the entry is hidden by the tags selected by a visitor
   */
  hidden?: boolean
}}

const projectIds = ref([] as string[])
const projects = ref({} as ProjectDisplayedEntries)
const ready = ref(false)
const currentRoute = getCurrentRoute()
const routeStore = useRouteStore()
const routeConfig = routeStore._routes[currentRoute.path] as ProjectListDefinition
const config = ref(null as ProjectList | null)
const projectViewPath = computed(() => `${currentRoute.path}/view`)

/**
 * Handler for a tag being selected;
 * updates the visibility state of the current entries
 * @param tagsToggled: the tags currently toggled in the filter panel
 */
 const onToggledTagsChanged = (tagsToggled: string[]) => {
  if (tagsToggled.length < 1) {
    Object.keys(projects.value).forEach(entryId => {
      projects.value[entryId].hidden = false
    })
  } else {
    Object.keys(projects.value).forEach(entryId => {
      projects.value[entryId].hidden = !projects.value[entryId].tags?.some(own => tagsToggled.includes(own))
    })
  }
}

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

<template lang="pug">
.template.project-list
  Transition
    .projects(
      v-if='ready'
    )
      Transition(
        v-for='id in projectIds'
      )
        ProjectTile(
          v-if='!projects[id].hidden || !config.removeFromView'
          v-bind='projects[id]'
          :class='{ hidden: projects[id].hidden && !config.removeFromView }'
          :id='id'
          :viewPath='projectViewPath'
          :isInternal='true'
        )
  Transition
    FilterPanel(
      v-if='ready && !!config.tags'
      :tags='config.tags'
      @toggledTagsChanged='onToggledTagsChanged($event)'
    )
</template>

<style scoped lang="sass">

</style>
