import React, { Suspense, useEffect, useState } from "react";
import { RenderInNewWindow } from "../../templates/CreateNewWindow";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { useCreateNewWindow, useLoadingProgress } from "../../../store/builder/store";
import Scene from "../../../modules/scene/scene";
import ComparisonResult from "./ComparisonResult";
import Button from "./Button";

const NewWindowScene = () => {
    const { versionStore } = useSceneContext();
    const { selectedVersion } = versionStore();
    const { setCreateNewWindow } = useCreateNewWindow();
    const { loadingProgress } = useLoadingProgress();

    return (
        <>
            {selectedVersion?.versionId && (
                <div style={{ width: "100%", height: "100%" }}>
                    <Suspense fallback={null}>
                        <RenderInNewWindow
                            title="3D Viewer"
                            onClose={() => setCreateNewWindow(false)}
                        >
                            <div
                                style={{
                                    position: "absolute",
                                    top: "10px",
                                    right: "900px",
                                    zIndex: 1000,
                                }}
                            >
                                <Button />
                            </div>
                            <Scene layout="Comparison Layout" />
                            {!loadingProgress && <ComparisonResult />}
                        </RenderInNewWindow>
                    </Suspense>
                </div>
            )}
        </>
    );
};

export default NewWindowScene;