import { defineUI } from "queenjs";
import { useEditor } from "../..";
import { CompUI } from "../CompUI";
import { useCompRef } from "../CompUI/basicUI/hooks";

export default defineUI({
  setup() {
    const { store, helper } = useEditor();
    const rootRef = useCompRef("root");
    return () => (
      <div
        ref={rootRef}
        class="overflow-hidden min-h-100vh !h-auto"
        style={helper.createStyle(
          helper.findRootComp()?.layout || { size: [750, 800] }
        )}
      >
        {store.pageCompIds.map((id) => {
          const compKey = store.designData.compMap[id]?.compKey;
          const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
          return Comp && <Comp key={id} compId={id} />;
        })}
      </div>
    );
  },
});
