import { useEditor } from "@/modules/editor";
import { inject, onMounted, provide, ref } from "vue";

export function useCompRef(compId: string) {
  const compRef = ref();
  const { store, helper } = useEditor();

  const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
  provide("compParentId", compId);
  store.setCompPid(compId, parentId);

  onMounted(() => {
    const comp = helper.findComp(compId);
    if (comp) {
      Object.defineProperties(comp, {
        $el: {
          value: compRef.value,
          configurable: true,
        },
      });
      compRef.value.compId= compId;
      compRef.value.compKey= comp.compKey;
    }
  });
  return compRef;
}
