export default function IslandsCanvas() {
    const [initialized, setInitialized] = useState(false);

    const canvasRef = useCallback((node: HTMLDivElement | null) => {
        if (node != null && !initialized) {
            initScene(node);
            setInitialized(true);
        }
    }, [initialized]);

    return (
        <div ref={canvasRef}></div>
    );
}

function initScene(node: HTMLDivElement) {
    const scene = new Scene();
    const camera = new PerspectiveCamera();
    const renderer = new WebGLRenderer();
    renderer.setClearColor(0xffffff);
    renderer.setSize(window.innerWidth, window.innerHeight);
    node.appendChild(renderer.domElement);

    scene.add(camera);
    scene.add(new Mesh(
        new BoxGeometry(100, 100),
        new MeshStandardMaterial({ color: new Color(1, 1, 1) })
    ));
    camera.position.setZ(5);

    renderer.render(scene, camera);

    const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
}