<script setup lang="ts">
import type { UseSwipeDirection } from '@vueuse/core'
import { useSwipe } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { usePageStore } from '~/stores/pages'

const router = useRouter()
const route = useRoute()
const card = ref<HTMLElement | null>(null)

const { pages, reader } = storeToRefs(usePageStore())

const swipe = useSwipe(card, {
  passive: true,
  onSwipeEnd: (_touch: TouchEvent, _direction: UseSwipeDirection) => {
    const currentPage = pages.value.find(
      (page) => page.path === route.fullPath,
    )!

    const currentIndex = pages.value.indexOf(currentPage)

    if (
      card.value?.offsetWidth &&
      Math.abs(swipe.lengthX.value) > 1.5 * Math.abs(swipe.lengthY.value) &&
      Math.abs(swipe.lengthX.value) / card.value?.offsetWidth >= 0.1
    ) {
      router.push(
        toRaw(pages.value)[
          swipe.lengthX.value > 0
            ? (currentIndex + 1) % pages.value.length
            : currentIndex - 1 < 0
              ? pages.value.length - (currentIndex + 1)
              : currentIndex - 1
        ].path,
      )
    }
  },
})
</script>

<template>
  <main
    ref="card"
    class="dimensions background h-animated overflow-auto flex flex-col gap-3 sm:gap-2 px-4 pt-4 pb-3"
    :class="{
      'sm:rounded-xl': !reader,
      '!max-h-full h-full': reader,
    }"
  >
    <Options />
    <Navigation />
    <slot name="header" />
    <NuxtPage
      class="scrollbar fade-mask-sm flex-grow overflow-x-hidden overflow-y-auto min-h-full sm:py-4 sm:pe-3"
    />
    <slot name="footer" />
  </main>
</template>
