import { ListaUsuarios } from './listausuarios.js';
import { ListaPartidas } from './listapartidas.js';
import { cardGamePropia, cardGameGeneral } from './htmlTmpl.js';

const usersConnectUlEl = document.querySelector('#users_connect');
const usersDisconnectUlEl = document.querySelector('#users_disconnect');
const partidasAbiertasEl = document.querySelector('#partidas_abiertas');
const partidasProcesoEl = document.querySelector('#tus_partidas');
const chat = document.querySelector('#logchat');

const userId = localStorage.getItem('userId');
const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });

document.querySelector('#btnCerrar').addEventListener('click', () => {
  cerrarSesion('buttonClick');
});
document.querySelector('#btnCrearPartida').addEventListener('click', () => {
  crearPartida();
});
document.querySelector('#chatinput').addEventListener('keyup', (event) => {
  enviarMensaje(event);
});

let listaUsuarios;
let listaPartidas;

// Funciones que modifican el DOM
function agregarUsuarioToLista(usuario, listaElemento, claseCSS) {
  const liUsuario = document.createElement('li');
  liUsuario.innerHTML = usuario.nickname;
  liUsuario.classList.add(claseCSS);
  listaElemento.appendChild(liUsuario);
}
function listarUsuarios() {
  usersConnectUlEl.innerHTML = '';
  usersDisconnectUlEl.innerHTML = '';
  const miUsuario = listaUsuarios.usuario;
  agregarUsuarioToLista(miUsuario, usersConnectUlEl, 'spanNickPropio');
  const usuariosConectados = listaUsuarios.usuariosConectados;
  usuariosConectados.forEach((usuario) => {
    agregarUsuarioToLista(usuario, usersConnectUlEl, 'spanNick');
  });
  const usuariosDesconectados = listaUsuarios.usuariosDesconectados;
  usuariosDesconectados.forEach((usuario) => {
    agregarUsuarioToLista(usuario, usersDisconnectUlEl, 'spanNickOffline');
  });
}
function listarPartidasAbiertas() {
  partidasAbiertasEl.innerHTML = '';
  listaPartidas.partidasAbiertas.forEach((partida) => {
    const cardGame =
      userId === partida.uuidJugadorA
        ? cardGamePropia(partida.nickJugadorA, partida.uuid)
        : cardGameGeneral(partida.nickJugadorA, partida.uuid);
    partidasAbiertasEl.appendChild(cardGame);
  });
}
function agregaMsg({ uuid, msg }) {
  const spanUser = document.createElement('span');
  const spanMsg = document.createElement('span');
  if (userId === uuid) {
    spanUser.classList.add('spanNickPropio');
    spanUser.textContent = `Tú: `;
    spanMsg.textContent = msg;
  } else {
    spanUser.classList.add('spanNick');
    spanUser.textContent = `${listaUsuarios.obtenerUsuarioPorUuid(uuid).nickname}: `;
    spanMsg.textContent = msg;
  }
  const linea = document.createElement('p');
  linea.appendChild(spanUser);
  linea.appendChild(spanMsg);
  chat.appendChild(linea);
  logchat.scrollTop = logchat.scrollHeight;
}
function agregaMsgBroadcast(msg) {
  const spanMsg = document.createElement('span');
  spanMsg.textContent = msg;
  spanMsg.classList.add('broadcastMsg');
  const linea = document.createElement('p');
  linea.appendChild(spanMsg);
  chat.appendChild(linea);
  logchat.scrollTop = logchat.scrollHeight;
}

// Logica de negocio de la aplicacion
const entraSala = ({ usuarios, partidas }) => {
  listaUsuarios = new ListaUsuarios(userId, usuarios);
  listaPartidas = new ListaPartidas(partidas);
  listarUsuarios();
  listarPartidasAbiertas();
};
const actualizaUsuarios = (usuario) => {
  listaUsuarios.actualizaUsuario(usuario);
  listarUsuarios();
  usuario.conectado
    ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
    : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
};
const agregarPartida = (partida) => {
  listaPartidas.agregarPartida(partida);
  listarPartidasAbiertas();
};

// Cerrar sesión
const cerrarSesion = (reason) => {
  if (reason === 'io server disconnect' || reason === 'buttonClick') {
    localStorage.removeItem('userId');
    window.location.replace('/');
  }
};
// Enviar mensaje
function enviarMensaje(event) {
  if (event.key === 'Enter') {
    const mensaje = event.target.value.trim();
    if (mensaje != '') {
      socket.emit('chatMsg', mensaje, agregaMsg);
    }
    event.target.value = '';
  }
}
function crearPartida() {
  socket.emit('creaPartida');
}

// Manejadores de eventos del socket
socket.on('onConnectRoom', entraSala);
socket.on('onUserConnectRoom', actualizaUsuarios);
socket.on('chatMsg', agregaMsg);
socket.on('onCrearPartida', agregarPartida);
socket.on('onUserDisconnectRoom', actualizaUsuarios);
socket.on('disconnect', cerrarSesion);

// // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
// // window.open(url, '_blank');