const socket = io("/");

const data = { is_host: false, cursors: {}, field: [], flags: 0, bombs: 0, text: "" }

/** @returns {string} */
function getNickname() {
    return document.getElementById("nickname").value
}
/** @returns {string} */
function getRoomId() {
    return document.getElementById("room-id").value
}
/** @returns {string} */
function getWidth() {
    return document.getElementById("width").value
}
/** @returns {string} */
function getHeight() {
    return document.getElementById("height").value
}
/** @returns {string} */
function getBombs() {
    return document.getElementById("bombs").value
}

function create() {
    data.is_host = true;
    socket.emit("create-room", getNickname(), getWidth(), getHeight(), getBombs())
}

function join() {
    data.is_host = false;
    socket.emit("join-room", getNickname(), getRoomId())
}

function restart() {
    socket.emit("restart")
}

/** 
 * @argument {string} block 
 */
function show(block) {
    document.querySelectorAll('[data-block]').forEach(x => x.style.display = 'none');
    document.querySelectorAll('[data-block="' + block + '"]').forEach(x => x.style.display = '');
}

/** 
 * @argument {string} msg
 */
function roomError(msg) {
    alert(msg)
}
/** 
 * @argument {string} roomId
 */
function roomJoin(roomId) {
    // alert(`Вы подключились к комнате #${roomId}`)
    localStorage.setItem("__saper_nickname", getNickname())
    otherJoin(socket.id, getNickname() + (data.is_host ? " (Вы 👑)" : " (Вы)"), true)
    chatMessage('service', "Вы подключены к комнате #" + roomId)
    show('game')

    startGame()
}

/**
 * @param {"service" | "self" | "other"} type 
 * @param {string} message 
 */
function chatMessage(type, message) {
    const msg = document.createElement('div')
    msg.classList.add('chat-' + type + '-msg')
    msg.innerText = message
    document.getElementById('chat').appendChild(msg)
    msg.scrollIntoView({ 'behavior': 'smooth' })
}
/**
 * 
 * @param {string} sid 
 * @param {string} nickname 
 * @param {boolean} onlyList
 */
function otherJoin(sid, nickname, onlyList = false) {
    if (!document.querySelector('[data-sid="' + sid + '"]')) {
        const user = document.createElement('div');
        user.classList.add('chat-service-msg')
        user.innerText = nickname;
        user.setAttribute('data-sid', sid)
        document.getElementById('users').appendChild(user)
    }

    if (!onlyList) {
        chatMessage('service', "К комнате подключился " + nickname)
        socket.emit("about-me")
    }
}

/**
 * 
 * @param {string} sid
 */
function otherDisconnect(sid, nickname) {
    const user = document.querySelector('[data-sid="' + sid + '"]')
    if (user)
        user.remove();

    chatMessage('service', "От комнаты отключился " + nickname)
    if (data.cursors[sid])
        delete data.cursors[sid];
}

function chat(nickname, msg) {
    chatMessage("other", nickname + ": " + msg)
}

function cursor(sid, nickname, x, y) {
    data.cursors[sid] = { x, y, nickname }
}

function updateField(field, flags, bombs, text) {
    data.field = field
    data.flags = flags
    data.bombs = bombs
    data.text = text
}

socket.on("room-error", roomError)
socket.on("room-join", roomJoin)
socket.on("other-join", otherJoin)
socket.on("about-me", (sid, nickname) => otherJoin(sid, nickname, true))
socket.on("other-disconnect", otherDisconnect)
socket.on("chat", chat)
socket.on("reload-page", () => window.location.reload())
socket.on("cursor", cursor)
socket.on('update-field', updateField)

document.getElementById("nickname").value = localStorage.getItem("__saper_nickname") || ""

const chatMsg = document.getElementById("chat-msg")

const colors = {
    bg: new ColorPicker('#color-bg'),
    bg2: new ColorPicker('#color-bg-2'),
    fg: new ColorPicker('#color-fg'),
    bgChatService: new ColorPicker('#color-bg-chat-service'),
    fgChatService: new ColorPicker('#color-fg-chat-service'),
    bgChatSelf: new ColorPicker('#color-bg-chat-self'),
    fgChatSelf: new ColorPicker('#color-fg-chat-self'),
    bgChatOther: new ColorPicker('#color-bg-chat-other'),
    fgChatOther: new ColorPicker('#color-fg-chat-other'),
    bgCellOpen: new ColorPicker("#color-bg-cell-open"),
    bgCellClosed: new ColorPicker("#color-bg-cell-closed"),
    bgCellBomb: new ColorPicker("#color-bg-cell-bomb"),
    fgCell1: new ColorPicker("#color-fg-cell-1"),
    fgCell2: new ColorPicker("#color-fg-cell-2"),
    fgCell3: new ColorPicker("#color-fg-cell-3"),
    fgCell4: new ColorPicker("#color-fg-cell-4"),
    fgCell5: new ColorPicker("#color-fg-cell-5"),
    fgCell6: new ColorPicker("#color-fg-cell-6"),
    fgCell7: new ColorPicker("#color-fg-cell-7"),
    fgCell8: new ColorPicker("#color-fg-cell-8"),
}

/**
 * 
 * @param {keyof colors} color 
 * @returns {string}
 */
function getColor(color) {
    return colors[color].color.string('hex')
}

const root = document.querySelector('html')
const computeStyles = window.getComputedStyle(root);
for (const color_e of Object.values(colors)) {
    const color_var = color_e.element.id.replace('color-', '--')
    const color_key = "__saper_" + color_e.element.id
    const color = localStorage.getItem(color_key) || computeStyles.getPropertyValue(color_var);
    color_e.setColor(color)
    const text = document.createElement('span')
    text.innerText = color_var.replace('--', '')
    color_e.element.appendChild(text)
    root.style.setProperty(color_var, color)
    color_e.on('pick', c => {
        const color = c.string('hex')
        console.log(color)
        root.style.setProperty(color_var, color)
        localStorage.setItem(color_key, color)

    })
}

chatMsg.addEventListener("keyup", function (event) {
    if (event.key === "Enter") {
        const msg = chatMsg.value;
        chatMsg.value = "";
        socket.emit("chat", msg)
        chatMessage("self", "Вы: " + msg)
    }
});


document.getElementById("room-id").addEventListener("keyup", function (event) {
    if (event.key === "Enter") {
        join()
    }
});