import { useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import "./style.css";
import "./App.css";
import { Canvas, useFrame } from "@react-three/fiber";
import { Mesh } from "three";

import { PolygonjsScene } from "@polygonjs/react-three-fiber";
import { loadScene_scene_01 } from "./polygonjs/scenes/scene_01/autogenerated/loadScene";
import {
	PolySceneWithNodeMap_scene_01,
	PolySceneProps_scene_01,
} from "./polygonjs/scenes/scene_01/autogenerated/PolySceneWithNodeMap";

function Box(props: any) {
	// This reference will give us direct access to the mesh
	const mesh = useRef<Mesh>();
	// Set up state for the hovered and active state
	const [hovered, setHover] = useState(false);
	const [active, setActive] = useState(false);
	// Subscribe this component to the render-loop, rotate the mesh every frame
	useFrame((state, delta) => (mesh.current!.rotation.x += delta));
	// Return view, these are regular three.js elements expressed in JSX
	return (
		<mesh
			{...props}
			ref={mesh}
			scale={active ? 1.5 : 1}
			onClick={(event) => setActive(!active)}
			onPointerOver={(event) => setHover(true)}
			onPointerOut={(event) => setHover(false)}
		>
			<boxGeometry args={[1, 1, 1]} />
			<meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
		</mesh>
	);
}

createRoot(document.getElementById("app")!).render(
	<div className="App">
		<a className="page-title" href="https://polygonjs.com">
			<img className="page-title-logo" src="./polygonjs.png" />
			<span className="page-title-text">Polygon + R3F + TS</span>
		</a>
		<Canvas camera={{ position: [4, 4, 4] }}>
			<ambientLight />
			<pointLight position={[10, 10, 10]} />
			<Box position={[-1.2, 0, 0]} />
			<Box position={[1.2, 0, 0]} />
			<PolygonjsScene<
				PolySceneWithNodeMap_scene_01,
				PolySceneProps_scene_01
			>
				sceneName={"scene_01"}
				loadFunction={loadScene_scene_01}
				baseUrl={import.meta.env.BASE_URL}
			/>
		</Canvas>
	</div>
);