import React, {useEffect, useState} from 'react';
import {Card, Col, InputNumber, Row} from "antd"
import socket, {emit} from "../util/socket";
import "../css/lobby.css";
import beer1 from "../img/beer1.png"

const Lobby = () => {
    const [lobbyId, setLobbyId] = useState<number | undefined>(undefined);
    const [isLeader, setIsLeader] = useState(false);
    const [userCount, setUserCount] = useState(0);

    async function onChangeLobbyInput(i: any) {
        setLobbyId(i);

        const result: any = await emit('join_lobby', i);
        setIsLeader(socket.id === result.lobby.leaderId);
        setUserCount(result.lobby.users?.length || 0);
    }

    useEffect(() => {
        socket.on('welcome', async (obj: any) => {
            setLobbyId(obj.lobby.name);
            setIsLeader(socket.id === obj.lobby.leaderId);
            setUserCount(obj.lobby.users?.length || 0);
        });
        return () => {
            socket.off("welcome");
        }
    });

    useEffect(() => {
        async function wrapper() {
            const result: any = await emit('lobby_info');
            setIsLeader(socket.id === result.lobby.leaderId);
            setUserCount(result.lobby.users?.length || 0);
        }

        wrapper();
    }, []);

    return (
        <div className="lobby">
            <Row>
                <Col span={24}>
                    <h1 id="centurion-title">Centurion! <img src={beer1} className="beer" alt="beer"/></h1>
                </Col>
            </Row>
            <Row>
                <Col className="hints" span={24}>
                    <div>Honderd minuten...</div>
                    <div>Honderd shots...</div>
                    <div>Kun jij het aan?</div>
                </Col>
            </Row>
            <Row>
                <Col className="control" span={8} offset={8}>
                    <Card title={`Lobby setup (${lobbyId}):`} actions={ isLeader ? [
                        <span onClick={async () => {await emit('request_start')}}>Start</span>,
                    ]: []}>
                        <span>
                            Huidige lobby <InputNumber size="small" min={100} max={100000} value={lobbyId}
                                                onChange={onChangeLobbyInput}/>
                        </span>

                        <p>Er zijn {userCount} gebruiker(s) aanwezig.</p>
                        <p> {isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'}</p>
                    </Card>

                </Col>
            </Row>
        </div>
    );
};

export default Lobby;