import useTitle from "../../utils/hooks/TitleHook";
import React from "react";
import {useNavigate} from "react-router";
import {NoButton} from "../components/Button";

const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;

const Rooms = () => {

    useTitle('Mau-Mau Rooms');
    const navigateTo = useNavigate();

    const [rooms, setRooms] = React.useState<string[]>([]);

    const handleRoomClick = (room: string) => {
        if (!localStorage.getItem('playerName')){
            localStorage.setItem("playerName", "Mau");
        }
        navigateTo(`/room/${room}`);
    }

    React.useEffect(() => {
        fetch(ROOM_URL)
            .then(r => r.json())
            .then(data => setRooms(data));
    }, []);

    return (
        <div>
            <h1 className={"mau"}>Rooms</h1>
            <ul>
                {
                    rooms.map((room) => {
                        return <li key={room}>
                            <NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
                        </li>
                    })
                }
            </ul>
        </div>
    );
};

export default Rooms;