<script setup lang="ts">
import type {CookieRef} from "#app";

definePageMeta({
  layout: "dash-settings",
  title: "Customization"
})

const colors_list = ref(["Cyan","Red","Green","Blue","Purple"])
const color = ref("...");

const fonts_list = ref(["Public Sans","Space Grotesk", "Geist"])
const font = ref("...");

const ready = ref(false);

onMounted(() => {
  color.value = ui_color_cookie().value
  ready.value = true
})

watch(color, (newVal, oldVal) => {
  ui_color_cookie().value = newVal;
})


</script>

<template>

    <UContainer class="mt-4 max-w-full justify-center">
        <UFormField
            label="Main Color"
            orientation="horizontal"
            description="Select the main color of the UI"
            size="lg"
            class="flex justify-between w-full mt-3 mb-3"
            :disabled="!ready"
        >
          <USelect v-model="color" :items="colors_list" />
        </UFormField>
        <UFormField
          label="Mode"
          orientation="horizontal"
          description="Select if you want Light or Dark mode"
          size="lg"
          class="flex justify-between w-full mt-3 mb-3"
        >
          <UColorModeSelect />
        </UFormField>
        <UFormField
          label="Font"
          orientation="horizontal"
          description="Select which font you want"
          size="lg"
          class="flex justify-between w-full mt-3 mb-3"
          :disabled="!ready"
      >
        <USelect v-model="font" :items="fonts_list" />
      </UFormField>
    </UContainer>
</template>

