<template>
  <div>
    <h1>Appearance</h1>
    
    <p class="subtitle">THEMES</p>
    <div class="themes">
      <div v-for="theme of themes" class="theme-preview-container">
        <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
            {{ theme.displayName }}
          </span>
        </span>
      </div>
    </div>

    <p class="subtitle">ICONS</p>
    <div class="themes">
    </div>


  </div>
</template>

<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig()
const defaultThemes = runtimeConfig.public.defaultThemes
const baseURL = runtimeConfig.app.baseURL;

const themes: Array<Theme> = []

interface Theme {
  displayName: string
  previewGradient: string
  complementaryColor: string
  themeURL: string
}


const fetchThemes = async () => {
  for (const theme of defaultThemes) {
    const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
    const themeConfigJson = await themeConfig.json() as Theme
    themes.push(themeConfigJson)
  }
}

await fetchThemes()
</script>

<style scoped>
.themes {
  display: flex;
}

.theme-preview-container {
  margin: .5em;
  width: 5em;
  height: 5em;
}

.theme-preview {
  width: 5em;
  height: 5em;
  border-radius: 100%;
  border: .1em solid var(--primary-color);

  display: inline-block;
  text-align: center;
  align-content: center;
}

.theme-title {
  font-size: .8em;
  line-height: 5em; /* same height as the parent to centre it vertically */
}
</style>
