import "./styles.css";
import { Fade, Slide, Throw, StarField, Motion } from "react-three-utils";
import { useState, useMemo } from "react";
import { Mesh, SphereGeometry, MeshStandardMaterial } from "three";
import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

export default function CosmicCube() {
  const [launchParticles, setLaunchParticles] = useState(false);

  // Preload particle geometry
  const redParticle = useMemo(() => {
    return new Mesh(
      new SphereGeometry(0.1),
      new MeshStandardMaterial({ color: "white" })
    );
  }, []);

  return (
    <Canvas>
      <StarField movements={{ y: 0.01 }} />
      <Slide enabled from={[0, 3, 3]} speed={0.3} animateScale>
        <Motion rotation={{ y: 0.01 }}>
          <Throw
            enabled={launchParticles}
            object={redParticle}
            interval={1000}
            travelDistance={5}
            velocity={(clock) => [0, 3, Math.cos(clock.getElapsedTime()) * 0.3]}
            onUpdate={(obj, progress) => {
              if (progress > 0.8) {
                obj.scale.setScalar(1 - (progress - 0.8) * 0.5);
              }
            }}
          >
            <Fade 
              enabled 
              type="in" 
              onComplete={() => setLaunchParticles(true)}
            >
              <mesh>
                <boxGeometry args={[1, 1, 1]} />
                <meshStandardMaterial color="#2193c0" />
              </mesh>
            </Fade>
          </Throw>
        </Motion>
      </Slide>
      <ambientLight />
      <OrbitControls />
    </Canvas>
  );
}