<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { usePageStore } from '~/stores/pages'

const pageStore = usePageStore()
const { pages } = storeToRefs(pageStore)

const route = useRoute()
const state = computed(() => {
  const i = pages.value.indexOf(
    pages.value.find(
      (page) => page.path === '/' + route.fullPath.split('/')[1],
    )!,
  )

  return {
    current: route.fullPath,
    index: i,
    next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
    prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
      .path,
  }
})
</script>

<template>
  <div class="control-layout pass-through">
    <NuxtLink class="control-icon no-decoration" :to="state.prev">
      <Icon name="iconoir:nav-arrow-left" />
    </NuxtLink>

    <NuxtLink class="control-icon no-decoration" :to="state.next">
      <Icon name="iconoir:nav-arrow-right" />
    </NuxtLink>
  </div>
</template>

<style scoped lang="scss">
.control {
  &-layout {
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;

    position: fixed;

    width: 100%;
    height: 100%;
  }

  &-icon {
    opacity: 0.25;
    transition: 0.15s ease;

    &:hover {
      opacity: 1;
    }
  }
}
</style>
