// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Starfield Generator
// Version 1.0

import React, { useEffect, useRef } from "react"
import { motion } from "framer-motion"
import * as THREE from "three"
import { addPropertyControls, ControlType } from "framer"

function StarFieldGenerator({ speed }) {
    return (
        <motion.div
            style={{
                width: "100%",
                height: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                background: "transparent",
            }}
        >
            <StarfieldAnimation speed={speed} />
        </motion.div>
    )
}

function StarfieldAnimation({ speed }) {
    const mountRef = useRef(null)

    useEffect(() => {
        const mount = mountRef.current
        let width = mount.clientWidth
        let height = mount.clientHeight

        // Set up scene
        const scene = new THREE.Scene()

        // Set up camera
        const camera = new THREE.PerspectiveCamera(
            75,
            width / height,
            0.1,
            1000
        )
        camera.position.set(0, 0, 0)

        // Set up renderer
        const renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true,
        })
        renderer.setSize(width, height)
        renderer.setClearColor(0x000000, 0) // Set background to transparent
        mount.appendChild(renderer.domElement)

        // Array to store stars
        const stars = []

        // Function to create a star
        function createStar() {
            const starGeometry = new THREE.SphereGeometry(
                Math.random() * 2 + 0.5,
                32,
                32
            )
            const starMaterial = new THREE.MeshBasicMaterial({
                color: 0xffffff,
            })
            const star = new THREE.Mesh(starGeometry, starMaterial)
            const distance = Math.random() * 1000 + 500
            const angle = Math.random() * Math.PI * 2
            star.position.set(
                Math.cos(angle) * distance,
                Math.sin(angle) * distance,
                -Math.random() * 500
            )
            scene.add(star)
            stars.push(star)
        }

        // Create stars
        const numStars = 500
        for (let i = 0; i < numStars; i++) {
            createStar()
        }

        // Set up animation loop
        const animate = () => {
            requestAnimationFrame(animate)

            // Move stars towards the camera and update positions
            stars.forEach((star) => {
                star.position.z += speed
                if (star.position.z > 0) {
                    star.position.z = -1000
                    star.position.x = (Math.random() - 0.5) * 2000
                    star.position.y = (Math.random() - 0.5) * 2000
                }
            })

            // Rotate camera for barrel roll effect
            camera.rotation.z += 0.001

            renderer.render(scene, camera)
        }

        animate()

        // Use ResizeObserver to handle resize
        const resizeObserver = new ResizeObserver(() => {
            width = mount.clientWidth
            height = mount.clientHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(width, height)
        })

        resizeObserver.observe(mount)

        return () => {
            resizeObserver.disconnect()
            if (mount && renderer.domElement) {
                mount.removeChild(renderer.domElement)
            }
        }
    }, [speed])

    return <div ref={mountRef} style={{ width: "100%", height: "100%" }} />
}

// Add property controls for Framer
addPropertyControls(StarFieldGenerator, {
    speed: {
        type: ControlType.Number,
        title: "Speed",
        defaultValue: 1,
        min: 0.1,
        max: 10,
        step: 0.1,
    },
})

export { StarFieldGenerator as default }