import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../..";
import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
import { View } from "../View";
import { CompUI } from "../..";

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { helper, controls } = useEditor();
    const { children } = useCompData(props.compId);
    return () => (
      <View compId={props.compId}>
        {children.default?.map((compId) => {
          const compItem = helper.findComp(compId) as DesignComp;
          const Comp =
            controls.compUICtrl.state.components.get(compItem.compKey)
              ?.Component || CompUI.Container.Component;

          return <Comp key={compItem.id} compId={compItem.id} />;
        })}
      </View>
    );
  },
});