<script setup lang="ts">
import { AGENTS } from '~~/types'

const colorMode = useColorMode()
const isDark = ref(colorMode.value === 'dark')
watch(isDark, () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
})

const agentRoutes = AGENTS.map(item => ({
  slug: item.slug,
  name: item.name,
  icon: item.icon,
  to: `/${item.slug}`,
}))

async function toggleTheme() {
  document.body.style.animation = 'switch-on .5s'
  await new Promise(resolve => setTimeout(resolve, 500))

  isDark.value = !isDark.value
  document.body.style.animation = 'switch-off .5s'

  await new Promise(resolve => setTimeout(resolve, 500))
  document.body.style.animation = ''
}

const router = useRouter()
defineShortcuts({
  t: () => toggleTheme(),
  backspace: () => router.back(),
})
</script>

<template>
  <header class="flex md:items-center justify-between my-8 gap-2">
    <NuxtLink
      class="text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white"
      to="/"
    >
      Art'Agents
    </NuxtLink>
    <nav class="flex gap-2 items-center justify-end flex-wrap">
      <UTooltip
        v-for="agent in agentRoutes"
        :key="agent.slug"
        :text="agent.name"
        :delay-duration="4"
      >
        <UButton
          :icon="agent.icon"
          :href="agent.to"
          :aria-label="agent.name"
          color="neutral"
          size="sm"
          variant="ghost"
        />
      </UTooltip>
      <UTooltip
        :delay-duration="4"
        text="Status page"
      >
        <UButton
          icon="i-ph-warning-duotone"
          target="_blank"
          href="https://status.arthurdanjou.fr"
          color="neutral"
          size="sm"
          variant="ghost"
        />
      </UTooltip>
      <USeparator
        orientation="vertical"
        class="h-6"
      />
      <ClientOnly>
        <UTooltip
          :kbds="['T']"
          text="Change theme"
          class="cursor-pointer"
          :delay-duration="4"
        >
          <UButton
            :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
            color="neutral"
            aria-label="switch theme"
            size="sm"
            variant="ghost"
            @click="toggleTheme()"
          />
        </UTooltip>
      </ClientOnly>
    </nav>
  </header>
</template>

<style>
@keyframes switch-on {
  0% {
    filter: blur(0);
    transform: scale(1);
  }
  100% {
    transform: scale(0.98);
    filter: blur(3px);
  }
}

@keyframes switch-off {
  0% {
    transform: scale(0.98);
    filter: blur(3px);
  }
  100% {
    filter: blur(0);
    transform: scale(1);
  }
}
</style>
