import React, {useEffect, useState} from 'react';
import {Card, Col, InputNumber, Row} from "antd"
import socket, {emit} from "../util/socket";
import "../css/lobby.sass";
import beer from "../img/beer.png"
import {NumberParam, useQueryParam} from 'use-query-params';

const Lobby = () => {
    const [lobbyId, setLobbyId] = useQueryParam('lobby', NumberParam);
    const [isLeader, setIsLeader] = useState(false);
    const [seekTime, setSeekTime] = useState(0);
    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) => {
            if (lobbyId) {
                // lobbyId is already defined, this means we have a queryparam set.
                await onChangeLobbyInput(lobbyId);
                return;
            }
            console.log("Got welcome", lobbyId);

            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();
    }, []);

    const seekItem = (
        <span>
            Start bij: <InputNumber size="small" min={0} max={60000} value={seekTime}
                                    onChange={time => setSeekTime(time || 0)}/>
                                     sec.
        </span>
    );

    return (
        <div className="lobby">
            <Row>
                <Col span={24}>
                    <h1 id="centurion-title">Centurion! <img src={beer} 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', seekTime)
                        }}>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>
                        {isLeader ? seekItem : ''}
                    </Card>

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

export default Lobby;