<template>
  <ShapeComponent :data="(item as any)" add-mode v-if="show" />
</template>

<script lang="ts" setup>
import { computed, onUnmounted, watch } from "vue";
import { ComponentSnapInfo, DrawItem } from "../components";
import { useStore } from "../store";
import { components } from "../components";
import { useCustomSnapInfos } from "../hook/use-snap";

const props = withDefaults(
  defineProps<{ item: DrawItem; temp?: boolean; show?: boolean }>(),
  { show: true }
);
const store = useStore();
const component = computed(() => components[store.getType(props.item.id)!]);
const ShapeComponent = computed(() => component.value.TempComponent);

const customSnapInfos = useCustomSnapInfos();
let infos: ComponentSnapInfo[] = [];
watch(
  () => ({ canSnap: !props.temp && !props.item.ref, item: props.item }),
  ({ canSnap, item }) => {
    infos.forEach(customSnapInfos.remove);
    if (!canSnap) return;
    infos = component.value.getSnapInfos(item as any);
    infos.forEach(customSnapInfos.add);
  },
  { deep: true, immediate: true, flush: "sync" }
);

onUnmounted(() => infos.forEach(customSnapInfos.remove));
</script>
