import React, {useEffect, useState} from 'react';
import './App.css';
import logo from "./via-logo.svg"
import {Row} from "antd"
import socket, { emit } from "./util/socket";
import NextShot from "./components/NextShot";
import ShotsTaken from "./components/ShotsTaken";
import Feed from "./components/Feed";
import Lobby from "./components/Lobby";


const App = () => {
    const [connected, setConnected] = useState(false);
    const [lobbyId, setLobbyId] = useState(null);

    useEffect(() => {
        socket.on('welcome', async (obj: any) => {
            const {lobby} = obj;
            setLobbyId(lobby);
            setConnected(true);

            // const joined = await emit('join_lobby', 123);
        });

        return () => {
            socket.off("SENDING_NEW_TIME");
            socket.off("welcome");
        }
    });

    const gameContent = (
        <Row>
            <NextShot/>
            <Feed/>
            <ShotsTaken/>
        </Row>
    );

    const lobbyContent = (
        <Row>
            <Lobby/>
        </Row>
    );

    const content = lobbyContent;

    return (
        <>
            <section className="content">
                {content}
            </section>
            <footer>
                <img src={logo} className="via-logo" alt="logo"/>
                <span>{connected ? 'Verbonden ' + lobbyId : ''}</span>
            </footer>
        </>
    );
};

export default App;