const webSocket = new WebSocket('ws://51.15.125.82:5000')


const waitForOpenConnection = () => {
    return new Promise((resolve, reject) => {
        const maxNumberOfAttempts = 10
        const intervalTime = 200 //ms

        let currentAttempt = 0
        const interval = setInterval(() => {
            if (currentAttempt > maxNumberOfAttempts - 1) {
                clearInterval(interval)
                reject(new Error('Maximum number of attempts exceeded'))
            } else if (webSocket.readyState === webSocket.OPEN) {
                clearInterval(interval)
                resolve()
            }
            currentAttempt++
        }, intervalTime)
    })
}

async function send(msg, data) {
    await waitForOpenConnection();
    webSocket.send(JSON.stringify({msg, data}))
}

let pokedex = {}
webSocket.onmessage = evt => {
    const {msg, data} = JSON.parse(evt.data);
    switch (msg) {
        case 'pokedexUpdated': pokedex = data; showPokedex(); break;
        case 'pokedexInitialized': pokedex = data; initGUI(); break;
        case 'pokedexCompleted': window.alert(data.msg); break;
        case 'error': window.alert(data.msg); break;
    }
}

function fillInPokémons(pkdx) {
    window.setTimeout(() => {
        send('updatePokedex', {pokemon: pkdx[0], values: {captured: true}})
        fillInPokémons(pkdx.slice(1))
    }, 200)
}

function initializePokedex() {
    send('initializePokedex')
}

initializePokedex()

function initGUI() {
    const selection = document.getElementById("pokeselect");
    const options = Object.entries(pokedex).map(([pokemon, properties]) => {
        const option = document.createElement("option")
        option.setAttribute("value", pokemon)
        option.append(pokemon)
        return option
    })
    selection.append(...options);
    showPokedex();
}

function catchPokemon() {
    const selection = document.getElementById("pokeselect").value;
    send('updatePokedex', {pokemon: selection, values: {captured: true}})
}


function showPokedex() {
    const container = document.getElementById("capturedPokemon");
    container.textContent = '';
    const pokedexTable = Object.entries(pokedex)
        .reduce((acc, val) =>
            (acc[acc.length - 1].length === 5)
                ? [...acc, [val]]
                : [...acc.slice(0, acc.length - 1), [...acc[acc.length - 1], val]],
            [[]]
        )

    const pokedexGUI = pokedexTable.map((pokeRow, colNum) => {
        const ths = pokeRow.map(([pokemon, properties], rowNum) => {
            const th = document.createElement("th");
            th.setAttribute("class", "pokecell")
            if(properties.captured) {
                const img = document.createElement("img");
                const htmlFriendlyPokeName = pokemon
                    .toLowerCase()
                    .replace("♀", "-f")
                    .replace("♂", "-m")
                    .replace("’", "")
                    .replace(". ", "-")
                img.setAttribute("src", `https://img.pokemondb.net/artwork/${htmlFriendlyPokeName}.jpg`);
                img.setAttribute("height", "100");
                img.setAttribute("width", "100");
                const name = document.createElement("h2")
                name.innerText = pokemon
                th.append(img, name)
            } else {
                const name = document.createElement("h1")
                name.innerText = `${colNum * 5 + rowNum + 1}`
                th.append(name)
            }
            return th
        })
        const tr = document.createElement("tr");
        tr.append(...ths)
        return tr
    })
    container.append(...pokedexGUI)
}