<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'

defineProps<{
  collapsed?: boolean
}>()

const colorMode = useColorMode()
const appConfig = useAppConfig()

const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']

const presets = [
  { label: 'Ocean Dark', primary: 'blue', neutral: 'slate', mode: 'dark', icon: 'i-lucide-waves' },
  { label: 'Forest Light', primary: 'green', neutral: 'stone', mode: 'light', icon: 'i-lucide-tree-pine' },
  { label: 'Sunset', primary: 'orange', neutral: 'zinc', mode: 'dark', icon: 'i-lucide-sunset' }
]

const applyPreset = (preset: typeof presets[0]) => {
  appConfig.ui.colors.primary = preset.primary
  appConfig.ui.colors.neutral = preset.neutral
  colorMode.preference = preset.mode
}

const items = computed<DropdownMenuItem[][]>(() => ([[{
  type: 'label',
  label: 'Quick Presets',
  icon: 'i-lucide-sparkles'
}], presets.map(preset => ({
  label: preset.label,
  icon: preset.icon,
  onSelect: () => applyPreset(preset)
})), [{
  label: 'Theme',
  icon: 'i-lucide-palette',
  children: [{
    label: 'Primary',
    slot: 'chip',
    chip: appConfig.ui.colors.primary,
    content: {
      align: 'center',
      collisionPadding: 16
    },
    children: colors.map(color => ({
      label: color,
      chip: color,
      slot: 'chip',
      checked: appConfig.ui.colors.primary === color,
      type: 'checkbox',
      onSelect: (e) => {
        e.preventDefault()
        appConfig.ui.colors.primary = color
      }
    }))
  }, {
    label: 'Neutral',
    slot: 'chip',
    chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
    content: {
      align: 'end',
      collisionPadding: 16
    },
    children: neutrals.map(color => ({
      label: color,
      chip: color === 'neutral' ? 'old-neutral' : color,
      slot: 'chip',
      type: 'checkbox',
      checked: appConfig.ui.colors.neutral === color,
      onSelect: (e) => {
        e.preventDefault()
        appConfig.ui.colors.neutral = color
      }
    }))
  }]
}, {
  label: 'Appearance',
  icon: 'i-lucide-sun-moon',
  children: [{
    label: 'Light',
    icon: 'i-lucide-sun',
    type: 'checkbox',
    checked: colorMode.value === 'light',
    onSelect(e: Event) {
      e.preventDefault()
      colorMode.preference = 'light'
    }
  }, {
    label: 'Dark',
    icon: 'i-lucide-moon',
    type: 'checkbox',
    checked: colorMode.value === 'dark',
    onUpdateChecked(checked: boolean) {
      if (checked) {
        colorMode.preference = 'dark'
      }
    },
    onSelect(e: Event) {
      e.preventDefault()
    }
  }]
}]]))
</script>

<template>
  <UDropdownMenu
    mode="hover"
    :items="items"
    :content="{ align: 'center', collisionPadding: 12 }"
    :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
  >
    <template #default="{ open }">
      <UButton
        color="neutral"
        variant="ghost"
        class="w-full rounded-none"
        :class="[collapsed ? 'justify-center square' : 'justify-start']"
        :aria-label="collapsed ? 'Settings' : undefined"
      >
        <UIcon
          name="i-lucide-settings"
          class="size-5 shrink-0"
          :class="{ 'animate-spin-slow': open }"
        />

        <span v-if="!collapsed" class="truncate">Settings</span>

        <UIcon
          v-if="!collapsed"
          name="i-lucide-chevrons-up-down"
          class="ms-auto size-5 shrink-0 transform transition-transform duration-200"
          :class="[open && 'rotate-90']"
        />
      </UButton>
    </template>
  </UDropdownMenu>
</template>
