<script setup lang="ts">
import { ref } from "vue"

const open = defineModel<boolean>("open", { required: true })

const tabs = ref([
  { label: "Outline", icon: "i-lucide-list", slot: "outline" },
  { label: "Properties", icon: "i-lucide-sliders-horizontal", slot: "properties" },
])
const activeTab = ref("outline")

// Driven by the active editor block's headings
const headings = ref([
  { label: "Introduction", level: 1 },
  { label: "Architecture", level: 2 },
  { label: "Block model", level: 3 },
  { label: "Parsing pipeline", level: 3 },
  { label: "API", level: 2 },
])
</script>

<template>
  <USidebar
    v-model:open="open"
    side="right"
    collapsible="offcanvas"
    :ui="{ header: 'border-b border-default' }"
    style="--sidebar-width: 14rem"
  >
    <template #header>
      <UTabs
        v-model="activeTab"
        :items="tabs"
        size="sm"
        color="neutral"
        variant="link"
        class="w-full"
      />
    </template>

    <!-- Outline tab -->
    <div v-if="activeTab === 'outline'" class="p-2 flex flex-col gap-0.5">
      <button
        v-for="(heading, i) in headings"
        :key="i"
        class="text-left text-sm text-muted hover:text-highlighted hover:bg-elevated px-2 py-1 rounded-[--ui-radius] transition-colors truncate w-full"
        :style="{ paddingLeft: `${(heading.level - 1) * 12 + 8}px` }"
      >
        {{ heading.label }}
      </button>
    </div>

    <!-- Properties tab -->
    <div v-if="activeTab === 'properties'" class="p-3 flex flex-col gap-3">
      <div class="flex flex-col gap-1">
        <span class="text-xs font-medium text-muted uppercase tracking-wide">Created</span>
        <span class="text-sm text-highlighted">Jan 15, 2025</span>
      </div>
      <div class="flex flex-col gap-1">
        <span class="text-xs font-medium text-muted uppercase tracking-wide">Tags</span>
        <div class="flex flex-wrap gap-1">
          <UBadge label="editor" color="neutral" variant="soft" size="sm" />
          <UBadge label="vue" color="primary" variant="soft" size="sm" />
        </div>
      </div>
      <div class="flex flex-col gap-1">
        <span class="text-xs font-medium text-muted uppercase tracking-wide">Word count</span>
        <span class="text-sm text-highlighted">1,248 words</span>
      </div>
    </div>
  </USidebar>
</template>
