<script setup lang="ts">
const { t } = useI18n()
const appConfig = useAppConfig()
const toast = useToast()
const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
const neutrals = ['slate', 'gray', 'zinc', 'stone', 'black']
const solarIconVariants: SolarIconVariant[] = ['broken', 'bold', 'outline', 'linear', 'bold-duotone', 'line-duotone']

function applyVariant(variant: SolarIconVariant) {
  (appConfig.saas.ui as { solarIconVariant: SolarIconVariant }).solarIconVariant = variant
  toast.add({
    title: t('dashboard.uiSettings.variantApplied', { variant }),
    color: 'success'
  })
}
function applyColor(color: string, type: 'primary' | 'secondary' | 'neutral') {
  appConfig.ui.colors[type] = color
  toast.add({
    title: t('dashboard.uiSettings.colorApplied', { type: type.replace(/^./, char => char.toUpperCase()), color }),
    color: 'success'
  })
}
</script>

<template>
  <NuxtLayout
    :page-title="t('dashboard.uiSettings.title')"
    name="dashboard"
    type="dashboard"
  >
    <UPageBody>
      <UCard>
        <template #header>
          <h2 class="text-xl font-semibold mb-2">
            {{ t('dashboard.uiSettings.title') }}
          </h2>
          <p class="text-sm text-muted">
            {{ t('dashboard.uiSettings.description') }}
          </p>
        </template>

        <h1 class="text-lg font-semibold mb-2 ">
          <UIcon
            :name="useSolarIcon('pen-new-square')"
          /> Solar icon variants
        </h1>
        <p class="text-muted mb-4">
          put this in your app.config.ts under saas.ui:
        </p>
        <pre>
          export default defineAppConfig({
            saas: {
              name: '{{ appConfig.saas.name }}',
              ui: {
                // Solar icon variant (linear, bold, outline, broken, bold-duotone, line-duotone)
                <strong>solarIconVariant: '{{ appConfig.saas.ui?.solarIconVariant }}'</strong>
              }
            }
          })
        </pre>
        <table class="table-auto w-full">
          <thead>
            <tr>
              <th class="text-left">
                Variant
              </th>
              <th class="text-left">
                Icon examples
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="variant in solarIconVariants"
              :key="variant"
              class="gap-4"
            >
              <td class="items-center px-2">
                {{ variant }}
              </td>
              <td class="items-center">
                <UButton
                  :icon="useSolarIcon('pen-new-square', variant as SolarIconVariant)"
                  color="primary"
                  variant="ghost"
                  size="xl"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                />
                <UButton
                  :icon="useSolarIcon('settings', variant as SolarIconVariant)"
                  color="primary"
                  variant="ghost"
                  size="xl"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                />
                <UButton
                  :icon="useSolarIcon('home', variant as SolarIconVariant)"
                  color="primary"
                  variant="ghost"
                  size="xl"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                />
                <UButton
                  :icon="useSolarIcon('bell', variant as SolarIconVariant)"
                  color="primary"
                  variant="ghost"
                  size="xl"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                />
                <UButton
                  :icon="useSolarIcon('info-circle', variant as SolarIconVariant)"
                  color="primary"
                  variant="ghost"
                  size="xl"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                />
                <UButton
                  icon="lucide:plus"
                  variant="subtle"
                  @click.prevent="applyVariant(variant as SolarIconVariant)"
                >
                  Apply
                </UButton>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="mt-10">
          <h1 class="text-lg font-semibold mb-2 ">
            <UIcon
              :name="useSolarIcon('palette')"
            /> Theme colors
          </h1>
          <p class="text-muted mb-4">
            put this in your app.config.ts under the standard nuxt ui config:
          </p>
          <pre>
            export default defineAppConfig({
              ui: {
                colors: {
                  <strong>primary: '<span :class="'text-' + appConfig.ui.colors.primary +'-500'">{{ appConfig.ui.colors.primary }}</span>',
                  secondary: '<span :class="'text-' + appConfig.ui.colors.secondary +'-500'">{{ appConfig.ui.colors.secondary }}</span>',
                  neutral: '<span :class="'text-' + appConfig.ui.colors.neutral +'-500'">{{ appConfig.ui.colors.neutral }}</span>',</strong>
                }
              }
            })
          </pre>
          <div>
            <h2 class="text-md">
              Primary:
            </h2>
            <div class="mb-4">
              <UButton
                v-for="color in colors"
                :key="color"
                :icon="appConfig.ui.colors.primary === color ? useSolarIcon('check-square') : ''"
                :style="{ backgroundColor: `var(--color-${color}-500)` }"
                class="text-white mx-1 my-1"
                @click.prevent="applyColor(color, 'primary')"
              >
                {{ color }}
              </UButton>
            </div>
          </div>
        </div>
        <div>
          <h2 class="text-md">
            Secondary:
          </h2>
          <div class="mb-4">
            <UButton
              v-for="color in colors"
              :key="color"
              :icon="appConfig.ui.colors.secondary === color ? useSolarIcon('check-square') : ''"
              :style="{ backgroundColor: `var(--color-${color}-500)` }"
              class="text-white mx-1 my-1"
              @click.prevent="applyColor(color, 'secondary')"
            >
              {{ color }}
            </UButton>
          </div>
        </div>

        <div>
          <h2 class="text-md">
            Neutral:
          </h2>
          <div class="mb-4">
            <UButton
              v-for="color in neutrals"
              :key="color"
              :icon="appConfig.ui.colors.neutral === color ? useSolarIcon('check-square') : ''"
              :style="{ backgroundColor: color === 'black' ? `black` : `var(--color-${color}-500)` }"
              class="text-white mx-1 my-1"
              @click.prevent="applyColor(color, 'neutral')"
            >
              {{ color }}
            </UButton>
          </div>
        </div>
      </UCard>
    </UPageBody>
    <PageStatus />
    <NotificationsSlideover />
  </NuxtLayout>
</template>
