<script lang="ts" setup>
  import { StageFrame } from './components/StageFrame';
  import { packageList } from '../packages/package';
  import { computed, ref } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import {
    ComponentMode,
    ConfigType,
    PackagesCategoryEnum,
    PackagesCategoryNameEnum,
  } from '../packages/index.type';
  import { fetchViewComponent, createComponent } from '../packages';
  import { componentMap, registerComponent } from '../packages/componentMap';
  import { watchEffect } from 'vue';
  import { unref } from 'vue';
  import { watch } from 'vue';

  interface PropsCheckedType {
    componentKey: string;
    categoryKey: string;
  }

  const props = defineProps<{
    checked?: PropsCheckedType;
  }>();

  const emit = defineEmits<{
    (event: 'update:checked', value: PropsCheckedType): void;
  }>();

  const activeKey = ref(PackagesCategoryEnum.TEXT);

  const getCategory = computed(() => {
    return Object.keys(packageList).map((key) => {
      const category = packageList[key] as ConfigType[];
      return {
        title: PackagesCategoryNameEnum[PackagesCategoryEnum[key]],
        key,
        items: category,
      };
    });
  });

  const getBindConfig = (key: string) => {
    const config = createComponent({ key } as ConfigType, { mode: ComponentMode.SELECT_PREVIEW });
    return {
      config,
    };
  };

  watchEffect(() => {
    unref(getCategory).forEach((category) => {
      category.items.forEach((item) => {
        const { key } = item;
        const component = fetchViewComponent({ key } as ConfigType);
        registerComponent(key, component);
      });
    });
  });

  const handleSelected = (item: ConfigType) => {
    const { key, package: packageKey } = item;
    emit('update:checked', { categoryKey: packageKey!, componentKey: key });
  };

  watch(
    () => props.checked?.categoryKey,
    (value) => {
      if (value) activeKey.value = value as PackagesCategoryEnum;
    }
  );
</script>

<template>
  <section>
    <Tabs v-model:activeKey="activeKey">
      <Tabs.TabPane
        v-for="item in getCategory"
        :key="item.key"
        :tab="item.title"
        :forceRender="false"
      >
        <main class="flex min-h-64 px-2 gap-8 flex-wrap justify-start py-2">
          <StageFrame
            class="mt-4"
            v-for="temp in item.items"
            :key="temp.key"
            @click.capture="handleSelected(temp)"
            :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
          >
            <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />
            <template #description>
              <div class="h-10 leading-10 text-center border-t border-light-600 border-solid">
                {{ temp.title }}
              </div>
            </template>
          </StageFrame>
        </main>
      </Tabs.TabPane>
    </Tabs>
  </section>
</template>