<template>
  <template v-for="item in items" :key="item.id">
    <ShapeComponent
      :data="item"
      @updateShape="(value: any) => store.setItem(type, { id: item.id, value })"
      @addShape="(value: any) => store.addItem(type, value)"
      @delShape="() => store.delItem(type, item.id)"
      v-if="!itemHasRegistor(item.id)"
    />
    <template v-else>
      <component :is="renderer(item.id)" :item="item" />
    </template>
  </template>
</template>

<script setup lang="ts">
import { ShapeType, components } from "../components";
import { computed, watchEffect } from "vue";
import { useStore, useStoreRenderProcessors } from "../store";

const props = defineProps<{ type: ShapeType }>();
const store = useStore();
const type = props.type as "arrow";
const ShapeComponent = components[type].Component;
const items = computed(() => store.data[type] || []);
const { itemHasRegistor, renderer } = useStoreRenderProcessors();

watchEffect(() => console.log(props.type, items.value));
</script>
