<script setup lang="ts">
import { computed } from 'vue'
import {
  ChevronLeft as ChevronLeftIcon,
  ChevronRight as ChevronRightIcon,
} from 'lucide-vue-next'
import type { ChildElement } from '@/stores/elements'

type ElementRouteName = 'element' | 'admin-element'
type ElementNavigationPrefix = 'element' | 'admin'

interface Props {
  currentElementId: number
  dataCyPrefix: ElementNavigationPrefix
  routeName: ElementRouteName
  siblingElements: ChildElement[]
}

const props = defineProps<Props>()

const currentSiblingIndex = computed(() => {
  return props.siblingElements.findIndex((siblingElement) => {
    return siblingElement.id === props.currentElementId
  })
})

const hasSiblingNavigation = computed(() => {
  return props.siblingElements.length > 1 && currentSiblingIndex.value !== -1
})

const previousSibling = computed(() => {
  return siblingElementAtOffset(-1)
})

const nextSibling = computed(() => {
  return siblingElementAtOffset(1)
})

const navigationDataCy = computed(() => {
  return `${props.dataCyPrefix}-sibling-navigation`
})

const previousDataCy = computed(() => {
  return `${props.dataCyPrefix}-sibling-previous`
})

const nextDataCy = computed(() => {
  return `${props.dataCyPrefix}-sibling-next`
})

function siblingElementAtOffset(offset: number): ChildElement | null {
  if (!hasSiblingNavigation.value) {
    return null
  }

  const siblingCount = props.siblingElements.length
  const targetIndex =
    (currentSiblingIndex.value + offset + siblingCount) % siblingCount

  return props.siblingElements[targetIndex] ?? null
}
</script>

<template>
  <nav
    v-if="
      hasSiblingNavigation && previousSibling !== null && nextSibling !== null
    "
    class="element-sibling-navigation"
    :data-cy="navigationDataCy"
    aria-label="Sibling elements"
  >
    <RouterLink
      :to="{
        name: routeName,
        params: { id: previousSibling.id },
      }"
      class="element-sibling-navigation__link"
      :data-cy="previousDataCy"
    >
      <ChevronLeftIcon :size="18" aria-hidden="true" />
      <span>Previous</span>
    </RouterLink>
    <RouterLink
      :to="{
        name: routeName,
        params: { id: nextSibling.id },
      }"
      class="element-sibling-navigation__link"
      :data-cy="nextDataCy"
    >
      <span>Next</span>
      <ChevronRightIcon :size="18" aria-hidden="true" />
    </RouterLink>
  </nav>
</template>

<style scoped>
.element-sibling-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.35rem 0 0;
}

.element-sibling-navigation__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    color 180ms ease;
}

.element-sibling-navigation__link:hover,
.element-sibling-navigation__link:focus-visible {
  border-color: var(--color-slate);
  color: var(--color-slate);
}

.element-sibling-navigation__link:focus-visible {
  outline: 3px solid rgb(61 78 93 / 24%);
  outline-offset: 3px;
}
</style>
