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}>
        <div>
          {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 (
              <div class="flex flex-col">
                <Comp key={compItem.id} compId={compItem.id} />
              </div>
            );
          })}
        </div>
      </View>
    );
  },
});
