<script lang="ts" setup>
import ColorPalette from './ColorPalette.vue';
import Scheme from './Scheme.vue';
import { ThemeAssemble } from '@/stores/helper/themes';
import { useSystemInfoStore } from '@/stores/modules/system';
import type { THEME_MODEL } from '@/enums/UI';

const { changeThemeKey, changeThemeModel } = useSystemInfoStore();

const themeColor = computed(() => {
  return useSystemInfoStore().theme;
});

const themeKey = computed(() => {
  return useSystemInfoStore().getThemeKey;
});

const themeModel = computed(() => {
  return useSystemInfoStore().getThemeModel;
});

type ThemeModelKey = keyof typeof THEME_MODEL;

const themeModelList: {
  key: ThemeModelKey
  value: ThemeModelKey
}[] = [
  {
    key: 'LIGHT',
    value: 'LIGHT',
  },
  {
    key: 'DARK',
    value: 'DARK',
  },
];

onMounted(() => {
  //
});
</script>

<template>
  <view class="bg-background flex-1">
    <div class="py-[32rpx] b flex flex-col b-[#123]">
      <h2 class="text-onBackground">
        click it to change themeModel
      </h2>

      <div class="flex flex-row my-3">
        <div
          v-for="(item, index) in themeModelList"
          :key="index"
          class="flex-1 p-4 flex justify-center items-center"
          :class="{
            'bg-common-black text-common-white': item.key === 'DARK',
            'bg-common-white text-common-black': item.key === 'LIGHT',
          }"
          @click="changeThemeModel({
            model: item.key,
          })"
        >
          {{ item.value }}
        </div>
      </div>

      <div class="m-3 text-onBackground">
        now : {{ themeModel }}
      </div>
    </div>

    <div class="py-[32rpx] b flex flex-col b-[#123]">
      <h2 class="text-onBackground">
        click it to change themeKey
      </h2>

      <div class="grid grid-cols-4 gap-4">
        <div v-for="(v, k) in ThemeAssemble" :key="k" class="flex flex-col justify-center items-center" @click="changeThemeKey({ key: k })">
          <div class="w-[100rpx] h-[100rpx] bg-[#123] rounded-[8rpx]" :style="{ backgroundColor: v.primary }" />
          <h4 class="text-onBackground">
            {{ k }}
          </h4>
        </div>
      </div>

      <h4 class="m-3 text-onBackground">
        now : {{ themeKey }}
      </h4>
    </div>

    <!-- 递归渲染色卡 -->
    <ColorPalette :palette="themeColor.palette" />

    <!-- lightScheme -->
    <span class="text-onBackground">lightScheme</span>
    <Scheme :scheme="themeColor.lightScheme" />

    <!-- darkScheme -->
    <span class="text-onBackground">darkScheme</span>
    <Scheme :scheme="themeColor.darkScheme" />
  </view>
</template>

<style lang="scss">
// page {
//   --at-apply: uno: bg-background;
// }
</style>
