import React, { useContext, useEffect, useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { UserContext} from '../context/UserContext';
import './home.css';

function Home({ isLoggedIn, setIsLoggedIn }) {
    const navigate = useNavigate();
    const [games, setGames] = useState([]);
    const { userId, username } = useContext(UserContext);

    useEffect(() => {
        if (isLoggedIn && userId) {
            axios.get(`http://localhost:5000/games/${userId}`)
                .then(response => {
                    setGames(response.data);
                })
                .catch(error => {
                    console.error('Error fetching games:', error);
                });
        }
    }, [isLoggedIn, userId]);

    const handleLogout = () => {
        setIsLoggedIn(false);
    };

    return (
        <div className="container">
            <h2>Willkommen zum P&P Manager {username}!</h2>
            {!isLoggedIn ? (
                <div className="button-group">
                    <button className="btn" onClick={() => navigate('/login')}>Anmelden</button>
                    <button className="btn" onClick={() => navigate('/register')}>Registrieren</button>
                </div>
            ) : (
                <div className="content">
                    <div className="button-group">
                        <button className="btn" onClick={() => navigate('/startGame')}>Starte Spiel</button>
                        <button className="btn" onClick={() => navigate('/joinGame')}>Betrete Spiel</button>
                        <button className="btn" onClick={handleLogout}>Ausloggen</button>
                    </div>
                    <div className="table-container">
                        <h3>Deine Spiele:</h3>
                        <table className="games-table">
                            <thead>
                                <tr>
                                    <th>Game ID</th>
                                    <th>Name</th>
                                    <th>Beschreibung</th>
                                </tr>
                            </thead>
                            <tbody>
                                {games.map(game => (
                                    <tr key={game.game_id}>
                                        <td>
                                            <Link to={`/games/${game.game_id}`} className="game-link">
                                                {game.game_id}
                                            </Link>
                                        </td>
                                        <td>{game.name}</td>
                                        <td>{game.description}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}
        </div>
    );
}

export default Home;