let width = 10;
let height = 10;

// 0 - free field, 1 - obstacle, 2 - start point, 3 - end point
let currentMode = 0;

//0 - means free, 1 - means obstacle, 3 - means start point, 4 - means end point
let fieldModel = [];

function changeMode(num) {
    currentMode = num
    rerenderMode()
}

function rerenderMode() {
    let modus = document.getElementById("mode")
    if (currentMode === 0)
        modus.innerText = 'Free Field'
    else if(currentMode === 1)
        modus.innerText = 'Obstacle'
    else if(currentMode === 2)
        modus.innerText = 'Start Point'
    else if (currentMode === 3)
        modus.innerText = 'End Point'
}

function onWidthInputChanged(num) {
    width = num;
}

function onHeightInputChanged(num) {
    height = num;
}

function regenerateField() {
    fieldModel = []
    for (let i = 0; i < height; ++i) {
        fieldModel.push(Array.from({length: width}, (element, index) => 0))
    }
    reDrawField()
}

function startAStar() {}

function reDrawField() {
    const oldField = document.getElementById("field")

    const newField = document.createElement("div")
    newField.setAttribute("id", "field")
    newField.setAttribute("class", "container text-center")

    for (let i = 0; i < fieldModel.length; ++i) {
        //Build a row
        let row = document.createElement("div")
        row.setAttribute("id", `row-${i}`)
        row.setAttribute("class", "row g-2 g-lg-3")
        for (let j = 0; j< fieldModel[i].length; ++j) {
            //add columns in built row
            let column = document.createElement("div")
            if (fieldModel[i][j] === 0) {
                column.setAttribute("class", "col p-3 border border-1 border-dark bg-white")
            } else if (fieldModel[i][j] === 1) {
                column.setAttribute("class", "col p-3 border border-1 border-dark bg-black")
            } else if (fieldModel[i][j] === 2) {
                column.setAttribute("class", "col p-3 border border-1 border-dark bg-warning")
            } else if (fieldModel[i][j] === 3) {
                column.setAttribute("class", "col p-3 border border-1 border-dark bg-success")
            }
            column.addEventListener("click", (event) => {
                if (currentMode === 2) {
                    for (let ii = 0; ii < height; ++ii) {
                        for (let jj = 0; jj < width; ++jj) {
                            if (fieldModel[ii][jj] === 2)
                                fieldModel[ii][jj] = 0
                        }
                    }
                }
                if (currentMode === 3) {
                    for (let ii = 0; ii < height; ++ii) {
                        for (let jj = 0; jj < width; ++jj) {
                            if (fieldModel[ii][jj] === 3)
                                fieldModel[ii][jj] = 0
                        }
                    }
                }
                fieldModel[i][j] = currentMode
                event.target.innerText = currentMode
                reDrawField()
            })
            column.innerText = fieldModel[i][j]

            row.appendChild(column)
        }
        newField.appendChild(row)
    }

    oldField.remove()
    document.body.appendChild(newField)
}

regenerateField()