<script setup lang="ts">
import type { VariantType } from "motion-v"
import { motion } from "motion-v"

const navigationItems = [
  { label: "Overview", icon: "i-lucide-book-open", to: "/" },
  {
    label: "Editor",
    icon: "i-lucide-layers",
    to: "/editor",
    description: "Multi-block shell with toolbar, drag, undo/redo",
  },
  {
    label: "EditorBlock",
    icon: "i-lucide-file-text",
    to: "/editor-block",
    description: "Single block with all markdown syntax",
  },
  {
    label: "Toolbar",
    icon: "i-lucide-rows-3",
    to: "/toolbar",
    description: "Formatting toolbar integration",
  },
  {
    label: "Suggestion Menu",
    icon: "i-lucide-list-ordered",
    to: "/suggestion-menu",
    description: "Slash commands, references, tags",
  },
  {
    label: "Themes",
    icon: "i-lucide-palette",
    to: "/themes",
    description: "CSS-variable theme system",
  },
]

const variants: {
  [k: string]: VariantType | ((custom: unknown) => VariantType)
} = {
  normal: {
    rotate: 0,
    y: 0,
    opacity: 1,
  },
  close: (custom: unknown) => {
    const c = custom as number
    return {
      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
      y: c === 1 ? 6 : c === 3 ? -6 : 0,
      opacity: c === 2 ? 0 : 1,
      transition: {
        type: "spring",
        stiffness: 260,
        damping: 20,
      },
    }
  },
}
</script>

<template>
  <UApp>
    <UHeader :ui="{ wrapper: 'border-b border-default' }">
      <template #title>
        <AppLogo class="w-auto h-5 shrink-0" />
      </template>

      <template #right>
        <UColorModeButton />
      </template>

      <template #toggle="{ open, toggle, ui }">
        <UButton
          size="sm"
          variant="ghost"
          color="neutral"
          square
          :class="ui.toggle({ toggleSide: 'right' })"
          @click="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-5"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <motion.line
              x1="4"
              y1="6"
              x2="20"
              y2="6"
              :variants="variants"
              :animate="open ? 'close' : 'normal'"
              :custom="1"
              class="outline-none"
            />
            <motion.line
              x1="4"
              y1="12"
              x2="20"
              y2="12"
              :variants="variants"
              :animate="open ? 'close' : 'normal'"
              :custom="2"
              class="outline-none"
            />
            <motion.line
              x1="4"
              y1="18"
              x2="20"
              y2="18"
              :variants="variants"
              :animate="open ? 'close' : 'normal'"
              :custom="3"
              class="outline-none"
            />
          </svg>
        </UButton>
      </template>

      <template #body>
        <UNavigationMenu
          orientation="vertical"
          highlight
          :items="navigationItems"
          class="-mx-2.5"
        />
      </template>
    </UHeader>

    <UMain>
      <UContainer>
        <UPage class="max-w-7xl mx-auto">
          <template #left>
            <UPageAside>
              <UNavigationMenu
                orientation="vertical"
                highlight
                :items="navigationItems"
              />
            </UPageAside>
          </template>

          <RouterView />
        </UPage>
      </UContainer>
    </UMain>
  </UApp>
</template>
