const shelfGrid = document.getElementById("shelfButtonContainer")
const makeClusterButton = document.getElementById("makeCluster")

let clusters = Array()
let chosenShelves = Array()

function getEByID(id) {
    return document.getElementById(id)
}

function shelfClick(id) {
    const clickedShelf = getEByID("b" + id.toString())

    if (!clusters.flat(1).includes(id)) { //If not id in clusters
        if (chosenShelves.includes(id)) { //If id in chosenShelves
            chosenShelves = chosenShelves.filter(e => {
                return e !== id;
            })
            clickedShelf.classList.remove("selected")
            clickedShelf.innerText = ""
        } else { //Else (if id not in chosenShelves
            chosenShelves.push(id)
            clickedShelf.classList.add("selected")
        }
    }

    chosenShelves.forEach((id, num) => {
        getEByID("b" + id.toString()).innerText = (num + 1).toString()
    })


    if (chosenShelves.length > 0) {
        makeClusterButton.classList.remove("hidden")
    } else {
        makeClusterButton.classList.add("hidden")
    }
}


function unselectAll() {
    chosenShelves.forEach(id => {
        getEByID("b" + id.toString()).innerText = ""
        getEByID("b" + id.toString()).classList.remove("selected")
    })
    chosenShelves = Array()
    makeClusterButton.classList.add("hidden")
}

window.onkeydown = function(event) {
    if (event.key === "Escape") {
        unselectAll()
    }
}