<script setup lang="ts">
// import LegacyLayout from '~/LegacyLayout.vue'
// TODO: Check if we ever need LegacyLayout
import UiApp from '~/ui/App.vue'

import type { QueueTrack } from '~/composables/audio/queue'

import { watchEffect, computed, onMounted, nextTick } from 'vue'
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'

import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'

import useLogger from '~/composables/useLogger'

import { generateTrackCreditStringFromQueue } from '~/utils/utils'

const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
const FilterModal = defineAsyncComponent(() => import('~/components/moderation/FilterModal.vue'))
const ReportModal = defineAsyncComponent(() => import('~/components/moderation/ReportModal.vue'))
const ServiceMessages = defineAsyncComponent(() => import('~/components/ServiceMessages.vue'))
const ShortcutsModal = defineAsyncComponent(() => import('~/components/ShortcutsModal.vue'))
const AudioPlayer = defineAsyncComponent(() => import('~/components/audio/Player.vue'))
const Sidebar = defineAsyncComponent(() => import('~/components/Sidebar.vue'))
const Queue = defineAsyncComponent(() => import('~/components/Queue.vue'))
import { useLocalStorage } from '@vueuse/core'
import { useLocalStorage, useStyleTag, useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
import { useLocalStorage, useStyleTag, useIntervalFn, useToggle } from '@vueuse/core'

const logger = useLogger()
logger.debug('App setup()')

const store = useStore()

// Tracks
const { currentTrack } = useQueue()
const getTrackInformationText = (track: QueueTrack | undefined) => {
  if (!track) {
    return null
  }

  return `♫ ${track.title} – ${generateTrackCreditStringFromQueue(track)} ♫`
}

// Update title
const initialTitle = document.title
watchEffect(() => {
  const parts = [
    getTrackInformationText(currentTrack.value),
    store.state.ui.pageTitle,
    initialTitle || 'Funkwhale'
  ]

  document.title = parts.filter(i => i).join(' – ')
})

// Styles
useStyleTag(computed(() => store.state.instance.settings.ui.custom_css.value))

// Fake content
onMounted(async () => {
  await nextTick()
  document.getElementById('fake-content')?.classList.add('loaded')
})

// Time ago
useIntervalFn(() => {
  // used to redraw ago dates every minute
  store.commit('ui/computeLastDate')
}, 1000 * 60)

// Shortcuts
const [_, toggleShortcutsModal] = useToggle(false)
onKeyboardShortcut('h', () => toggleShortcutsModal())

// Fetch user data on startup
// NOTE: We're not checking if we're authenticated in the store,
//       because we want to learn if we are authenticated at all
store.dispatch('auth/fetchUser')

// TODO:
// Research...
// - "What is the use case for this toggle?"
// - "Is Local Storage (persistence on a specific browser
//    on a specific machine) the right place?"
const isUIv2 = useLocalStorage('ui-v2', true)
</script>

<template>
  <UiApp/>
  <!-- <LegacyLayout v-else /> -->
</template>

<style>
html, body {
  font-size: 16px;

}

</style>
