<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 pageStore = usePageStore()
const { pages } = storeToRefs(pageStore)

const swipe = useSwipe(card, {
  passive: true,
  onSwipe: (_touch: TouchEvent) => {
    console.log(card.value?.offsetWidth, swipe.lengthX.value)
  },
  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) / card.value?.offsetWidth >= 0.5
    ) {
      if (swipe.lengthX.value > 0) {
        router.push(
          toRaw(pages.value)[
            currentIndex - 1 < 0
              ? pages.value.length - (currentIndex + 1)
              : currentIndex - 1
          ].path,
        )
      } else {
        router.push(
          toRaw(pages.value)[(currentIndex + 1) % pages.value.length].path,
        )
      }
    }
  },
})
</script>

<template>
  <main
    ref="card"
    class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
  >
    <Navigation />
    <slot name="header" />
    <NuxtPage
      class="scrollbar fade-mask-sm flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
    />
    <slot name="footer" />
  </main>
</template>
