class ListaUsuarios {
  _usuario = {};
  _usuarios = [];

  constructor(uuidUsuario, usuarios) {
    this._usuario = usuarios.find((usuario) => usuario.uuid === uuidUsuario);
    this._usuarios = usuarios.filter((usuario) => usuario.uuid !== uuidUsuario);
  }
  get usuario() {
    return this._usuario;
  }
  get usuariosConectados() {
    return this._usuarios
      .filter((usuario) => usuario.conectado)
      .sort((a, b) => a.nickname.localeCompare(b.nickname));
  }
  get usuariosDesconectados() {
    return this._usuarios
      .filter((usuario) => !usuario.conectado)
      .sort((a, b) => a.nickname.localeCompare(b.nickname));
  }
  actualizaUsuario(usuario) {
    const user = this.obtenerUsuarioPorUuid(usuario.uuid);
    if (user) {
      user.conectado = usuario.conectado;
    } else {
      this._usuarios.push(usuario);
    }
  }
  obtenerUsuarioPorUuid(uuid) {
    return this._usuarios.find((usuario) => usuario.uuid === uuid);
  }
}

class ListaPartidas {
  _partidas = [];

  agregarPartida(partida) {
    this._partidas.push(partida);
  }

  get partidasAbiertas() {
    return this._partidas.filter((partida) => partida.abierta);
  }
}

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.getElementById('logchat');
const userId = localStorage.getItem('userId');
const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });

let listaUsuarios;
let listaPartidas = new ListaPartidas();

function unirse(data) {
  console.log(data);
}

// Funciones que modifican el DOM
// Añadir lista de usuarios al 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() {
  listaPartidas.partidasAbiertas.forEach((partida) => {
    cardGameHTML(partida.nickJugadorA, partida.uuid);
  });
}

// Añadir msg al chat
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;
}
//Añadir mensaje del servidor
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;
}
const cardGameHTML = (nickname, game_id) => {
  var cardGameDiv = document.createElement('div');
  cardGameDiv.classList.add('cardGame');
  cardGameDiv.innerHTML =
    nickname === listaUsuarios.usuario.nickname
      ? `<span>${nickname}</span>
      <span>VS</span>
      <span>Esperando rival</button>
      `
      : `<span>${nickname}</span>
      <span>VS</span>
      <button onclick="unirse('${game_id}')">Unirse</button>
      `;
  partidasAbiertasEl.appendChild(cardGameDiv);
};

// Logica de negocio de la aplicacion
//Entra a la sala
const entraSala = (usuarios) => {
  listaUsuarios = new ListaUsuarios(userId, usuarios);
  listarUsuarios();
};
// Actualiza info Usuarios
const actualizaUsuarios = (usuario) => {
  listaUsuarios.actualizaUsuario(usuario);
  listarUsuarios();
  usuario.conectado
    ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
    : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
};

const agregaPartida = (partida) => {
  partidasAbiertasEl.innerHTML = '';
  listaPartidas.agregarPartida(partida);
  listarPartidasAbiertas();
};

const onCloseClick = () => {
  localStorage.removeItem('userId');
  window.location.replace('/');
};
// Cerrar sesión
const cerrarSesion = (reason) => {
  if (reason === 'io server disconnect') {
    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);
    }
    event.target.value = '';
  }
}
// Crear partida
const crearPartida = () => {
  socket.emit('creaPartida');
};

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

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