import "./styles.sass";
import ActionCard from "@/pages/Home/components/ActionCard";
import JoinForm from "@/pages/Home/components/JoinForm";
import CreateForm from "@/pages/Home/components/CreateForm";
import {faArrowRightToBracket, faPlusSquare} from "@fortawesome/free-solid-svg-icons";
import {StateContext} from "@/common/contexts/StateContext";
import {SocketContext} from "@/common/contexts/SocketContext";
import {useContext, useState} from "react";

export const Home = () => {
    const {setCurrentState} = useContext(StateContext);
    const {connect, send} = useContext(SocketContext);
    const [homeState, setHomeState] = useState("initial"); // initial, joining, creating

    const handleJoinClick = () => {
        setHomeState("joining");
    };

    const handleCreateClick = () => {
        setHomeState("creating");
    };

    const handleBack = () => {
        setHomeState("initial");
    };

    const handleJoinSubmit = (name, roomCode) => {
        connect();
        send("joinRoom", {name, roomCode});
        setCurrentState("Game");
    };

    const handleCreateSubmit = (name) => {
        connect();
        send("createRoom", {name});
        setCurrentState("Game");
    };

    return (
        <div className="home-page">
            <div className="background-overlay">
                <div className="rotating-gradient"></div>
            </div>
            
            <div className={`logo-container ${homeState !== 'initial' ? 'shifted' : ''}`}>
                <h1 className="logo">ToneGuessr</h1>
                <p className="tagline">Das Frequenzspiel für Marco :3</p>
            </div>
            
            <div className={`content-container ${homeState !== 'initial' ? 'active' : ''}`}>
                <div className={`action-area ${homeState !== 'initial' ? 'hidden' : ''}`}>
                    <ActionCard title="Beitreten" icon={faArrowRightToBracket} onClick={handleJoinClick} />
                    <ActionCard title="Erstellen" icon={faPlusSquare} onClick={handleCreateClick} />
                </div>
                
                <div className={`form-container ${homeState === 'joining' ? 'active' : ''}`}>
                    {homeState === 'joining' && (
                        <JoinForm onSubmit={handleJoinSubmit} onBack={handleBack} />
                    )}
                </div>
                
                <div className={`form-container ${homeState === 'creating' ? 'active' : ''}`}>
                    {homeState === 'creating' && (
                        <CreateForm onSubmit={handleCreateSubmit} onBack={handleBack} />
                    )}
                </div>
            </div>
        </div>
    );
}