<script setup lang="ts">
// Fond de page (spec §7.2) : blanc / teinté (aplat clair) / pleine couleur.
import type { Background } from '~~/types'

const model = defineModel<Background>({ required: true })

const modes = [
  { value: 'white', label: 'Blanc' },
  { value: 'tint', label: 'Teinté' },
  { value: 'color', label: 'Couleur' },
] as const

function setMode(mode: Background['mode']) {
  if (mode === 'white') model.value = { mode: 'white' }
  else if (mode === 'tint') model.value = { mode: 'tint', color: model.value.mode === 'tint' ? model.value.color : TINT_PRESETS[0] }
  else model.value = { mode: 'color', color: model.value.mode === 'color' ? model.value.color : COLOR_PRESETS[1] }
}

const swatches = computed(() =>
  model.value.mode === 'tint' ? TINT_PRESETS : model.value.mode === 'color' ? COLOR_PRESETS : [],
)
</script>

<template>
  <div class="space-y-2">
    <p class="text-xs font-medium uppercase tracking-wide text-neutral-500">Fond de page</p>
    <div class="flex gap-1">
      <UButton
        v-for="m in modes"
        :key="m.value"
        :label="m.label"
        size="xs"
        :variant="model.mode === m.value ? 'solid' : 'outline'"
        color="neutral"
        @click="setMode(m.value)"
      />
    </div>
    <div v-if="swatches.length" class="flex flex-wrap gap-1.5 pt-1">
      <button
        v-for="c in swatches"
        :key="c"
        type="button"
        class="size-7 rounded-full border transition-transform hover:scale-110"
        :class="(model as any).color === c ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
        :style="{ backgroundColor: c }"
        :aria-label="c"
        @click="model = { mode: model.mode as 'tint' | 'color', color: c }"
      />
    </div>
  </div>
</template>
