import React, { useState, useEffect } from 'react';
import LobbyPage from '../components/Lobbylayout.js';
import { setHost, setSearch } from '../redux/user/userActions.js';
import { connect } from 'react-redux';


const Lobby = (props) => {
    const [matchStarted, setMatchStarted] = useState(false);
    const [listaJugadores, setListaJugadores] = useState();
    const [hostActual, setHostActual] = useState();


    const urlJugadores = "http://127.0.0.1:8000/matches/"+props.lobbyname+'/users/'
    const fetchApiJugadores = async () => {

        const responseJSON = await fetch(urlJugadores)
        const response = await responseJSON.json()

        setListaJugadores(response)
    }

    const urlHost = "http://127.0.0.1:8000/matches/"+props.lobbyname+'/host/'
    const fetchApiHost = async () => {

        const responseJSON = await fetch(urlHost)
        const response = await responseJSON.json()
        setHostActual(response[0][0])
    }

    useEffect (() =>{
        fetchApiJugadores()
        fetchApiHost()
        console.log('lobby')
        const urlWs = "ws://127.0.0.1:8000/matches/"+props.lobbyname+'/users/'+props.nick;
        console.log('conexion ws')
        const ws = new WebSocket(urlWs);
                ws.onopen = function(eventInfo) {
            console.log("Socket connection is open!");


        }
        ws.onmessage = (ev) => {
            let response = JSON.parse(ev.data);


            switch(response.notification) {
                case "someone joined":
                    fetchApiJugadores();
                    break

                case "match is about to start":
                    console.log('comenzar partida')
                    break

                default: console.log('error notif')
            }

        }

    },[])


    // TODO display players
    const startMatch = () => {
        let newMatchStarted = matchStarted;
        newMatchStarted = true;
        setMatchStarted(newMatchStarted);

    }

    return (
        <LobbyPage
            nick={props.nick}
            lobbyname={props.lobbyname}
            host={hostActual}
            list={listaJugadores}
            startMatch={startMatch}
        />
    )
}

const mapStateToProps = state => {
    return {
        nick: state.nick,
        host: state.esHost,
        search: state.usarSearch,
        lobbyname: state.lobbyname
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setHost: () => dispatch(setHost()),
        setSearch: () => dispatch(setSearch())
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
    )(Lobby)