const express = require("express");
const http = require("http");
const { Server } = require("socket.io")
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
   cors: {
       origin: "*"
   } 
});
const PORT = 3000;

const activeUsers = new Set();

io.on("connection", (socket) => {
    console.log("New connection");

    socket.on("new user connected", (data) => {
        console.log(`${data} connected`); //Printing out connected data -> (user)
        socket.data.user = data;          //Get users name
        activeUsers.add(data);            //Adding user to active users
        io.emit("new user connected", [...activeUsers]); //Converting activeUser to an Array
    });

    socket.on("disconnect", () => {                      //No data were sent
        console.log(`${socket.data.user} disconnected`); //Printing out logged out data -> (user)
        activeUsers.delete(socket.data.user);            //Deleting data (user) from activeUsers
        io.emit("user disconnected", socket.data.user);  //Sending data to others that someone has disconnected
    });

});

server.listen(PORT, () => console.log(`Server is running on ${PORT}`));

const socket = io("http://127.0.0.1:3000");
const users = document.getElementById("users");
const input = document.getElementById("input");
const send = document.getElementById("send");
const chat = document.getElementById("chat");

let userName = "";

const onUserConnect = (user) => {
    userName = user || `User${Math.floor(Math.random()*1000000)}`; //Generating random name
    socket.emit("new user connected", userName); //io.on name
    newUser(userName);
};

const newUser = (user) => {
    if(document.querySelector(`.${user}-userlist`)) return;
    const newUserDiv = `
    <div class="${user}-userlist"> 
    <p>${user}</p>
    </div>
    `;
    users.innerHTML += newUserDiv;
}

window.onload = () => {
    onUserConnect();
}

socket.on("new user connected", (data) => { //index.js - row 19 ([on name])
    console.log(data);
    data.map((user) => newUser(user));
});

socket.on("user disconnected", (user)=> {
    document.querySelector(`.${user}-userlist`).remove();
});

//CHAT
send.onclick = () => {
    socket.emit("chat", `${userName}: ${input.value}`);
    input.value = "";
}

socket.on("chat", (data) => {
    chat.innerHTML += `<p>${data}</p>`;
});

    socket.on("chat", (data)=> {
        io.emit("chat", data);
    });
});