<script setup lang="ts">
import { TABS_INJECTION_KEY } from '~/injection-keys'
import { computed, provide, reactive, ref, watch } from 'vue'

import { type Props as TabProps } from '~/components/ui/Tab.vue'

import Button from "~/components/ui/Button.vue";
import Link from "~/components/ui/Link.vue";
import { useRoute } from 'vue-router'

const currentTitle = ref<TabProps['title']>('')
const tabs = reactive<TabProps[]>([])
const currentRoute = useRoute()

provide(TABS_INJECTION_KEY, {
  currentTitle: currentTitle,
  tabs: tabs,
})

/* Note that this only compares the name. Make sure to add a `name` field to identify paths in your router config! */
const actualCurrentTitle = computed(() =>
  tabs.find(({ to })=> to && typeof to !== 'string' && 'name' in to && currentRoute.name === to?.name)?.title
  || currentTitle.value)

const currentIndex = computed(() =>
  tabs.findIndex(({title}) => title === actualCurrentTitle.value)
)

watch(() => tabs.length, (_, from) => {
  if (from === 0) {
    currentTitle.value = tabs[0].title
  }
})
</script>

<template>
  <div class="funkwhale tabs">
    <div class="tabs-header">
      <component ghost :is="tab.to ? Link : Button"
        v-for="(tab, _) in tabs" :class="{ 'is-active': actualCurrentTitle === tab.title }"
        v-bind="tab"
        :onClick="() => { currentTitle = tab.title }"
        @keydown.left="currentTitle = tabs[(currentIndex - 1 + tabs.length) % tabs.length].title"
        @keydown.right="currentTitle = tabs[(currentIndex + 1) % tabs.length].title"
        class="tabs-item"
      >
        <div class="is-spacing">{{ tab.title }}</div>
        <label>{{ tab.title }}</label>
      </component>

      <div class="tabs-right">
        <slot name="tabs-right" />
      </div>
    </div>

    <slot />
  </div>
</template>

<style lang="scss">
@import './tabs.scss'
</style>
