<script lang="ts" setup>
import type { View } from '../types';
import { computed } from 'vue';
import { useContext } from '../context';
import ColorConfig from '../configs/ColorConfig.vue';

defineOptions({
  name: 'ConfigCurrentView',
})

const ctx = useContext()
const view = computed<View | undefined>(() => {
  return ctx.activeViewId ? ctx.views[ctx.activeViewId] : undefined
})
const styles = computed(() => {
  if (!view.value?.theme) {
    return undefined
  }
  return Object.entries(view.value.theme).filter(([, value]) => {
    return  typeof value === 'string' && value.startsWith('@@theme.')
  }) as Array<[string, string]>
})
</script>

<template>
  {{ ctx.activeViewId }}
  <hr/>
  <template v-for="([key, value]) in styles" :key="key">
    <ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
    <div v-else>{{ key }}:{{ value }}</div>
  </template>
<pre><code>{{ view }}</code></pre>
</template>
