<template>
    <div class="home">
        <!-- <h1>{{num1}} + {{num2}} = {{ sum }}</h1>     #example calculator
        <input v-model="num1" placeholder="Number One">
        <input v-model="num2" placeholder="Number Two"> -->
        <pre>{{displayGrid(grid)}}</pre> <!-- Displey grid on load -->
        <pre>{{output}}</pre>
        <input v-model="ro" placeholder="Number One"> <!-- update inputs-->
        <input v-model="pe" placeholder="Number Two">
        <button v-on:click="changeGrid(ro,pe);displayGrid(grid)" variant="success">Update Grid</button> <!-- on click sets a place in grid to 5 depedning on inputs-->

    </div>
</template>

<script>
    export default({
        name: 'Home',
        data() { //global variables init
            return {
                grid: [],
                todis: "",
                pe: Number(0),
                ro: Number(0),
                output: []
            };
        },
        methods: { //all needed methods
            addToGrid(adding) {
                this.grid.push(adding)
            },
            makeGrid(width, height) {
                function Node(x,y,id) { //0 - unchecked; 1 - Wall; 2 - Start; 3 - End
                    this.x = x
                    this.y = y
                    this.id = id
                    this.visited = false
                    this.prev = []
                }
                if (this.grid.length === 0) { //Stops grid being made multiple times
                    for (let y = 0; y < height; y++) {
                        let row = []
                        for (let x = 0; x < width; x++) {
                            var newNode = new Node(x, y, 0)
                            row.push(newNode)
                        }
                        this.addToGrid(row)
                    }
                }
            },
            Dijkstra(grid, start, end) {
                function findNeighbours(grid, x, y) {
                    let Neighbours = []
                    let PosNeighbours = []
                    grid[y][x].visited = true
                    if (x == 0) {
                        x = x+1
                    }
                    if (y == 0) {
                        y = y+1
                    }
                    if (typeof grid[y][x+1] !== 'undefined') {
                            PosNeighbours.push(grid[y][x+1])
                    }
                    if (typeof grid[y][x-1] !== 'undefined') {
                            PosNeighbours.push(grid[y][x-1])
                    }
                    if (typeof grid[y+1][x] !== 'undefined') {
                            PosNeighbours.push(grid[y+1][x])
                    }
                    if (typeof grid[y-1][x] !== 'undefined') {
                            PosNeighbours.push(grid[y-1][x])
                    }
                    for (let node of PosNeighbours) {
                        if (typeof grid[node.y][node.x] === 'undefined') {
                            null
                        }
                        else {
                            if (node.visited === false) {
                                Neighbours.push(node)
                                let nx = node.x
                                let ny = node.y
                                if (grid[ny][nx].prev !== []) {
                                    console.log(node)
                                    grid[ny][nx].prev = grid[y][x]
                                }
                            }
                        }
                    }
                    return Neighbours
                }
                if (start !== end) {
                    let startNode = grid[start[1]][start[0]]
                    this.toCheck = []
                    this.toCheck.push(startNode)
                    let toChecknext = []
                    while (grid[end[1]][end[0]].visited === false) {
                        if (this.toCheck.length !== 0) {
                            let node = this.toCheck.shift()
                            let nodestoadd = findNeighbours(grid, node.x, node.y)
                            for (let node of nodestoadd) {
                                toChecknext.push(node)
                            }
                        } else {
                            for (let node in toChecknext) {
                                this.toCheck.push(toChecknext.shift())
                            }
                        }
                    }
                    let currentNode = grid[end[1]][end[0]]
                    let pathnodes = []
                    while (currentNode.x !== startNode.x && currentNode.y !== startNode.y) {
                        console.log(currentNode)
                        pathnodes.push(currentNode.prev)
                        currentNode = currentNode.prev
                    }
                    this.output = pathnodes
                } else {
                    return [start]
                }

            },
            displayGrid(grid) {
                this.todis = ""
                for(const row of grid) {
                    for (const node of row) {
                        this.todis += " "+node.id
                    }
                    this.todis += "\n"
                }
                return this.todis
            },
            changeGrid(thisx, thisy) {
                this.grid[thisy][thisx].id = 1
            }
        },
        created: function () {
            this.makeGrid(10, 10)
            this.Dijkstra(this.grid,[0,0],[5,5])
        },
        updated: function () {
            //On Update
        }
    });

</script>

<style></style>