<script setup lang="ts">
import MediaShowcase from '@/components/MediaShowcase.vue'
import type { Records, View } from '@/jfapi'
import { onBeforeMount, ref } from 'vue'
import jfapi from '@/jfapi'
import { useRoute } from 'vue-router'

const views = ref<View[]>()
onBeforeMount(async () => {
  const viewlist = ref<Records<View> | null>()
  viewlist.value = await jfapi.LoadViews()
  if (viewlist.value === null) {
    // error
  } else {
    views.value = viewlist.value.Items
    for (const view of views.value) {
      localStorage.setItem('jf_view_' + view.Id, view.CollectionType)
    }
  }
})

const route = useRoute()
const homeIsActive = () => {
  return route.path === '/home'
}
const viewIsActive = (id: string) => {
  return route.path.split('/')[2] === id
}
</script>

<template>
  <main>
    <MediaShowcase />
    <div class="home-nav">
      <RouterLink
        to="/home"
        class="home-nav-item"
        :class="homeIsActive() ? 'active' : ''"
        key="home"
        >Home</RouterLink
      >
      <RouterLink
        class="home-nav-item"
        v-for="view in views"
        :to="`/view/${view.Id}`"
        :key="view.Id"
        :class="viewIsActive(view.Id) ? 'active' : ''"
        >{{ view.Name }}</RouterLink
      >
      <RouterLink to="/search">
        <font-awesome-icon icon="fa-solid fa-magnifying-glass" size="sm" />
      </RouterLink>
    </div>
    <div class="media">
      <RouterView v-slot="{ Component, route }"
        ><component :is="Component" :key="route.path"
      /></RouterView>
    </div>
    <div class="footer"></div>
  </main>
</template>

<style scoped>
a {
  color: var(--color-text);
  text-decoration: none;
}
.home-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5em;
  gap: 1em;
  align-items: center;
}
.home-nav-item {
  padding: 0.4em 1.5em;
}
.home-nav-item:hover {
  cursor: pointer;
  color: var(--color-text-faded);
}
.home-nav-item.active {
  background-color: var(--color-text);
  border-radius: 15px;
  color: var(--color-text-dark);
  font-weight: 600;
}
.home-nav-item.active:hover {
  background-color: var(--color-text-faded);
}
.media {
  margin: 0 10%;
}
.footer {
  height: 100px;
}
</style>
