import { computed } from 'vue'
import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'

import { useMainStore } from '../store/main'

import { SearchInput } from '../components/SearchInput.vine'
import { NavSidebar, NavBar } from '../components/Navbars.vine'
import { Player } from '../components/Player.vine'

export const RootView = () => {
  const 
    mainStore = useMainStore(),
    route = useRoute(),

    isAuthenticated = computed(() => !!mainStore.serverInfo),

    routeOnAttributes = (r: RouteLocationNormalizedLoaded) => (
      (['album', 'genre', 'artist', ' search', 'queue'].includes(r.name as string))
      ? { key: JSON.stringify(r.params) }
      : {}
    )

  return vine`
    <router-view v-slot="{ Component, route: viewRoute }">
      <NavSidebar v-if="isAuthenticated" />
      <main>
        <SearchInput v-if="isAuthenticated" />
        <component
          :is="Component"
          v-if="!viewRoute.meta.keepAlive"
          v-bind="routeOnAttributes(viewRoute)"
        />
        <keep-alive v-else max="5">
          <component
            :is="Component"
            v-bind="routeOnAttributes(viewRoute)"
          />
        </keep-alive>
      </main>
      <Player v-if="isAuthenticated" />
      <NavBar v-if="isAuthenticated" />
    </router-view>

    <transition name="fade">
      <div v-if="mainStore.loaderVisible" class="loader-overlay">
        <img src="" alt="Loading...">
      </div>
    </transition>
  `
}