import Game from "./pages/Game";
import {useContext, useEffect, useState} from "react";
import {StateContext} from "@/common/contexts/StateContext";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faDrum, faGuitar, faHeadphones, faMusic} from "@fortawesome/free-solid-svg-icons";
import Home from "@/pages/Home";
import WaitingRoom from "@/pages/WaitingRoom";
import Ending from "@/pages/Ending";

const App = () => {
    const {currentState} = useContext(StateContext);

    const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });

    const musicNotes = [
        { id: 1, top: "8%", left: "20%", icon: faMusic, scale: 1.2 },
        { id: 2, top: "75%", left: "85%", icon: faGuitar, scale: 1 },
        { id: 3, top: "65%", left: "12%", icon: faHeadphones, scale: 1.1 },
        { id: 4, top: "20%", left: "70%", icon: faDrum, scale: 0.9 }
    ];

    useEffect(() => {
        const handleMouseMove = (e) => {
            if (!handleMouseMove.ticking) {
                handleMouseMove.ticking = true;
                requestAnimationFrame(() => {
                    setCursorPos({ x: e.clientX, y: e.clientY });
                    handleMouseMove.ticking = false;
                });
            }
        };
        handleMouseMove.ticking = false;

        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, []);

    return (
        <>
            <div className="background-elements">
                <div className="glow-point point-1" style={{
                    transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -20}px, ${(cursorPos.y / window.innerHeight - 0.5) * -20}px)`
                }}></div>
                <div className="glow-point point-2" style={{
                    transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * 15}px, ${(cursorPos.y / window.innerHeight - 0.5) * 15}px)`
                }}></div>
                <div className="glow-point point-3" style={{
                    transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -10}px, ${(cursorPos.y / window.innerHeight - 0.5) * -10}px)`
                }}></div>

                {musicNotes.map((note) => (
                    <div key={`note-${note.id}`} className={`music-note note-${note.id}`}
                         style={{
                             top: note.top,
                             left: note.left,
                             fontSize: `${note.scale * 60}pt`,
                             transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -5 * note.scale}px, ${(cursorPos.y / window.innerHeight - 0.5) * -5 * note.scale}px)`
                         }}
                    >
                        <FontAwesomeIcon icon={note.icon} />
                    </div>
                ))}
            </div>
            {currentState === "WaitingRoom" && <WaitingRoom />}
            {currentState === "Home" && <Home />}
            {currentState === "Game" && <Game />}
            {currentState === "Ending" && <Ending />}
        </>
    )
}

export default App