<script setup lang="ts">
const builtinColors = [
  'zinc',
  'slate',
  'stone',
  'gray',
  'neutral',
  'red',
  'rose',
  'orange',
  'green',
  'blue',
  'yellow',
  'violet',
]
const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1]

const { color, radius } = useShadcnTheme()
const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  },
})
</script>

<template>
  <div class="p-4">
    <div class="grid space-y-1">
      <h1 class="text-md text-foreground font-semibold">
        自定义外观
      </h1>
      <p class="text-xs text-muted-foreground">
        选择一个你喜欢的样式和颜色。
      </p>
    </div>
    <div class="space-y-1.5 pt-6">
      <Label for="color" class="text-xs"> 颜色 </Label>
      <div class="grid grid-cols-3 gap-2 py-1.5">
        <Button
          v-for="(c, index) in builtinColors"
          :key="index"
          variant="outline"
          class="h-8 justify-start px-3"
          :class="[
            c === color ? 'border-foreground border-2' : '',
            `theme-${c}`,
          ]"
          @click="color = c"
        >
          <span
            class="h-5 w-5 rounded-full flex items-center justify-center bg-primary"
          >
            <div v-if="c === color" class="i-ph:check-bold text-white" />
          </span>
          <span class="ml-2 text-xs capitalize">
            {{ c }}
          </span>
        </Button>
      </div>
    </div>
    <div class="space-y-1.5 pt-6">
      <Label for="radius" class="text-xs"> 圆角 </Label>
      <div class="grid grid-cols-5 gap-2 py-1.5">
        <Button
          v-for="(r, index) in builtinRadiuses"
          :key="index"
          variant="outline"
          class="h-8 justify-center px-3"
          :class="r === radius ? 'border-foreground border-2' : ''"
          @click="radius = r"
        >
          <span class="text-xs">
            {{ r }}
          </span>
        </Button>
      </div>
    </div>
    <div class="space-y-1.5 pt-6">
      <Label for="theme" class="text-xs"> 主题 </Label>

      <div class="flex space-x-2 py-1.5">
        <Button
          class="h-8"
          variant="outline"
          :class="{ 'border-2 border-foreground': !isDark }"
          @click="isDark = false"
        >
          <div class="i-ph-moon mr-2" />
          <span class="text-xs">Light</span>
        </Button>
        <Button
          class="h-8"
          variant="outline"
          :class="{ 'border-2 border-foreground': isDark }"
          @click="isDark = true"
        >
          <div class="i-ph-sun mr-2" />
          <span class="text-xs">Dark</span>
        </Button>
      </div>
    </div>
  </div>
</template>
