<script setup lang="ts">
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
import type { UseScrollReturn } from '@vueuse/core'
import { vScroll } from '@vueuse/components'

const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })

provide('navigation', navigation)


const targetTimeCoef = ref(1)
const el = ref<HTMLElement | null>(null)

const { arrivedState } = useScroll(el)
const { x, y, isOutside } = useMouseInElement(el)

function onScroll(state: UseScrollReturn) {
  if (state.isScrolling.value) {
    targetTimeCoef.value = 100
  } else {
    targetTimeCoef.value = 1
  }
}


</script>

<template>
  <div ref="el" v-scroll="onScroll" class="h-screen w-screen overflow-y-auto overflow-x-hidden">
    <Header />

    <UMain>
      <slot />
    </UMain>

    <Footer />

    <ClientOnly>
      <LazyUContentSearch :files="files" :navigation="navigation" />
    </ClientOnly>
    <div class="fixed bottom-0 right-0 -z-10 opacity-90">
      <ClientOnly>
        <Galaxy :target-time-coef="targetTimeCoef" />
      </ClientOnly>
    </div>
  </div>
</template>
