<script setup lang="ts">
import { useColorMode } from '@vueuse/core'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu'
import { useSettings } from '@/composables/useSettings'
import { WT1iser } from '@/services/wt1'

const mode = useColorMode()
const { defaultTraceView, defaultNodeView } = useSettings()

function handleThemeChange(theme: string) {
  mode.value = theme as 'light' | 'dark' | 'auto'
  WT1iser.themeChange(theme as 'light' | 'dark' | 'auto')
}
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <button
        class="w-full flex items-center gap-3 py-1 px-2 hover:bg-sidebar-accent rounded-sm transition-colors text-left hover:cursor-pointer"
      >
        <i class="dku-icon-gear-20 text-muted-foreground flex-shrink-0" />
        <span class="text-sm font-medium flex-1">Settings</span>
      </button>
    </DropdownMenuTrigger>
    <DropdownMenuContent side="top" align="start" class="w-[200px]">
      <!-- Theme -->
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <i class="dku-icon-sun-16 mr-2" />
          Theme
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuRadioGroup :model-value="mode" @update:model-value="handleThemeChange">
            <DropdownMenuRadioItem value="light">
              <i class="dku-icon-sun-16 mr-2" />
              Light
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="dark">
              <i class="dku-icon-moon-16 mr-2" />
              Dark
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="auto">
              <i class="dku-icon-laptop-16 mr-2" />
              System
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuSubContent>
      </DropdownMenuSub>

      <DropdownMenuSeparator />

      <!-- Default Trace View -->
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <i class="dku-icon-sitemap-16 mr-2" />
          Trace view
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuRadioGroup
            :model-value="defaultTraceView"
            @update:model-value="defaultTraceView = $event as any"
          >
            <DropdownMenuRadioItem value="explorer">
              <i class="dku-icon-sitemap-16 mr-2" />
              Explorer
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="timeline">
              <i class="dku-icon-chart-horizontal-bar-16 mr-2" />
              Timeline
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="tree">
              <i class="dku-icon-diagram-16 mr-2" />
              Tree
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuSubContent>
      </DropdownMenuSub>

      <!-- Default Node View -->
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <i class="dku-icon-file-text-16 mr-2" />
          Node view
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuRadioGroup
            :model-value="defaultNodeView"
            @update:model-value="defaultNodeView = $event as any"
          >
            <DropdownMenuRadioItem value="formatted">
              <i class="dku-icon-file-text-16 mr-2" />
              Formatted
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="raw">
              <i class="dku-icon-code-16 mr-2" />
              Raw
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
