<template>
  <div id="app" :key="locale" class="tw-flex tw-flex-col tw-min-h-screen">
    <AppNavbar :modules="modules" />

    <div class="tw-flex-1 tw-flex tw-my-8">
      <RouterView v-if="authStore.steeringUser" />
      <Home v-else :modules="modules" />
    </div>

    <AppFooter :modules="footerModules" />
  </div>
</template>

<script setup lang="ts">
import AppNavbar from './components/Navbar.vue'
import AppFooter from './components/Footer.vue'
import Home from './Pages/Home.vue'
import { useI18n } from '@/i18n'
import { useAuthStore } from '@/stores/auth'
import { computedIter } from '@/util'

const { locale, t } = useI18n()
const authStore = useAuthStore()

const footerModules = computedIter(function* () {
  if (authStore.isSuperuser) {
    yield {
      slug: 'settings',
      title: t('navigation.settings'),
    }
  }
})

const modules = computedIter(function* () {
  if (authStore.currentUser) {
    yield {
      icon: '/assets/shows.svg',
      slug: 'shows',
      title: t('navigation.shows'),
    }
    yield {
      icon: '/assets/files.svg',
      slug: 'files',
      title: t('navigation.filesPlaylists'),
    }
  }

  if (authStore.isSuperuser) {
    yield {
      icon: '/assets/calendar.svg',
      slug: 'calendar',
      title: t('navigation.calendar'),
    }
  }
})

authStore.init()
</script>