import { defineComponent } from "vue";
import { useEditor } from "../..";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { CompUI } from "../CompUI";

export default defineComponent({
  setup() {
    const { store, helper } = useEditor();
    return () => {
      const pageComp = helper.findRootComp();
      if (!pageComp) return;
      return (
        <CompUI.Page.Component class="overflow-hidden" compId={pageComp.id}>
          {{
            Container: (children: any) => children,
            CompItem(comp: DesignComp) {
              const compKey = store.designData.compMap[comp.id]?.compKey;
              const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
              return Comp && <Comp key={comp.id} compId={comp.id} />;
            },
          }}
        </CompUI.Page.Component>
      );
    };
  },
});