const makeClusterButton = document.getElementById("makeCluster")
let numClusters

let clusters = {}
let occupiedLamps = Array()
let chosenShelves = Array()

let chosenCluster = -1

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

function shelfClick(id) {
    const clickedShelf = getEByID("b" + id.toString())
    console.log(chosenCluster >= 0)
    if (chosenCluster >= 0) {
        unselectAll()
    }
    chosenCluster = -1

    if (!occupiedLamps.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() {
    chosenCluster = -1
    chosenShelves.forEach(id => {
        getEByID("b" + id.toString()).innerText = ""
        getEByID("b" + id.toString()).classList.remove("selected")
    })
    chosenShelves = Array()
    makeClusterButton.classList.add("hidden")
}


function createCluster() {
    const shelves = JSON.stringify(chosenShelves)
    const numLights = chosenShelves.length
    const sendDict = {
        ["numLights"]: numLights,
        ["lights"]: shelves
    }
    console.log(JSON.stringify(sendDict))
    sendWebRequest("http://192.168.1.170/api/create_cluster", JSON.stringify(sendDict), "POST")
}


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

function deleteCluster() {
    if (chosenCluster >= 0) {
        const sendDict = {
            ["cluster"]: chosenCluster,
        }
        sendWebRequest("http://192.168.1.170/api/delete_cluster", JSON.stringify(sendDict), "POST")
    }
}


function sendWebRequest(url, data, method) {
    /*const Http = new XMLHttpRequest()
    Http.open(method, url)
    Http.setRequestHeader("data", data)
    Http.send()

    Http.onreadystatechange = (e) => {
        console.log(Http.responseText)
    }*/

    fetch(url, {
        method: method,
        headers: new Headers({'data': data}),
        //mode: 'no-cors'
        })
        .then(res => {
            console.log(res)
            //updateConfig()
        })
}

function updateConfig() {
    unselectAll()
    fetch("http://192.168.1.170/api/get_config")
        .then(response => response.json())
        .then(data => {
            console.log(data)
            numClusters = data["numClusters"]
            clusters = data["clusters"]

            occupiedLamps = Array()
            let id = -1
            for (const cluster of data.clusters) {
                id++
                for (let lamp of cluster.lights) {
                    occupiedLamps.push(lamp)
                }

                const clusterButton = document.createElement("button")
                clusterButton.innerText = (id+1).toString()
                clusterButton.onclick = function () {
                    unselectAll()
                    clusterButton.classList.add("selected")
                    chosenCluster = id
                    let lampId = 0
                    for (let lamp of cluster.lights) {
                        console.log(lamp)
                        getEByID("b" + lamp.toString()).classList.add("selected")
                        getEByID("b" + lamp.toString()).innerText = (lampId+1).toString()
                        lampId += 1
                    }
                    chosenShelves = cluster.lights
                }
                getEByID("clusters").appendChild(clusterButton)
            }

        })
}

updateConfig()