<script lang="ts" setup>
import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'

defineProps({
  hideTrigger: {
    type: Boolean,
    default: false,
  },
  nav: {
    type: Array as () => TopbarNavItem[],
    default: () => topbarNavDefaults,
  },
})

const colorMode = useColorMode()
</script>

<script lang="ts">
export interface TopbarNavItem {
  title: string
  to: string
  icon?: string
}

export const topbarNavDefaults = [
  {
    title: '课程中心',
    to: '/course',
    icon: 'tabler:home',
  },
  {
    title: 'AI 备课',
    to: '/course/prepare',
    icon: 'tabler:clipboard-list',
  },
  {
    title: 'AI 教科研',
    to: '/course/research',
    icon: 'tabler:report-search',
  },
  {
    title: '课程资源库',
    to: '/course/resources',
    icon: 'tabler:books',
  },
]
</script>

<template>
  <header
    class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear border-b sticky top-0 z-30 bg-background"
  >
    <!-- group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 -->
    <div class="flex items-center gap-2 px-4 w-full">
      <SidebarTrigger
        v-if="!hideTrigger"
        class="-ml-1"
      />
      <slot name="title-area" />
      <div class="flex-1 flex justify-center">
        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem
              v-for="item in nav"
              :key="item.title"
            >
              <NuxtLink
                v-slot="{ isActive, href, navigate }"
                :to="item.to"
                custom
              >
                <NavigationMenuLink
                  :active="isActive"
                  :href
                  :class="navigationMenuTriggerStyle()"
                  @click="navigate"
                >
                  <Icon
                    v-if="item.icon"
                    :name="item.icon"
                    class="mr-1.5"
                    size="16px"
                  />
                  <span>{{ item.title }}</span>
                </NavigationMenuLink>
              </NuxtLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button
            variant="ghost"
            size="icon"
          >
            <Icon
              name="tabler:moon"
              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
            />
            <Icon
              name="tabler:sun"
              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
            />
            <span class="sr-only">Toggle theme</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem @click="colorMode.preference = 'light'">
            亮色
          </DropdownMenuItem>
          <DropdownMenuItem @click="colorMode.preference = 'dark'">
            暗色
          </DropdownMenuItem>
          <DropdownMenuItem @click="colorMode.preference = 'system'">
            跟随系统
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  </header>
</template>

<style scoped></style>
