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

const views = ref<View[]>()
onBeforeMount(async () => {
  const viewlist = ref<Records<View> | null>()
  const host = localStorage.getItem('jf_host')
  console.log('Host =>', host)
  viewlist.value = await jfapi.LoadViews()
  if (window.location.pathname.toLowerCase() !== '/login') {
    if (host === null) {
      window.location.href = '/login'
    } else if (viewlist.value === null) {
      window.location.href = '/login'
    }
  }
  views.value = viewlist.value ? viewlist.value.Items : undefined
  console.log(views.value)
  localStorage.setItem('jf_views', JSON.stringify(views.value ? views.value : ''))
})
</script>

<template>
  <main>
    <MediaShowcase />
    <div class="home-nav">
      <div class="home-nav-item active">Home</div>
      <div class="home-nav-item" v-for="view in views" :key="view.Id">{{ view.Name }}</div>
    </div>
    <div class="media">
      <RouterView />
    </div>
  </main>
</template>

<style scoped>
.home-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5em;
  gap: 3em;
  align-items: center;
}
.home-nav-item:hover {
  cursor: pointer;
  color: var(--color-text-faded);
}
.home-nav-item.active {
  padding: 0.4em 1.5em;
  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%;
}
</style>
