class Game {
    constructor() {
        this.whitePlayer = new Player('white');
        this.blackPlayer = new Player('black');
    }
    drawGamePanel(x,y, widthAndHeight) {
        var boxes = new Array();
        for(var i=0; i<y; i++) {
            for(var j=0; j<x; j++) {
                boxes.push(new Array(i+1,j+1))
            }
        }
        var rows = new Array();
        var row = new Array();
        boxes.forEach(function(item, index) {
            var domElement = document.createElement('div');
            domElement.setAttribute('data-x', item[1]);
            domElement.setAttribute('data-y', item[0]);
            domElement.setAttribute('id', 'field-'+(index+1))
            var backgroudColor = '';
            domElement.setAttribute(
                'style', 
                'width:'+widthAndHeight+'px; height:'+widthAndHeight+'px;'
            )
            if(row.length<8) {
                row.push(domElement);
            }
            if(row.length == 8 ) {
                rows.push(row)
                row = new Array();
            }
        })
        rows.forEach(function(item, indexRow) {
            var wrap = document.createElement('div');
            wrap.setAttribute('id', 'row-'+(indexRow+1));
            document.getElementById('gamePanel').append(wrap)
            item.forEach(function(field, indexField) {
                if(((indexRow+1)+(indexField+1))%2 == 0) {
                    field.setAttribute('class', 'even field')
                } else {
                    field.setAttribute('class', 'odd field')
                }
                wrap.append(field);
            })
        })
    }

    setPlayingFigures() {
        var whiteStartRow = document.getElementById('row-1');
        var whiteFields = document.querySelectorAll('#row-1 .field')
        var blackStartRow = document.getElementById('row-8');
        var blackFields = document.querySelectorAll('#row-8 .field')
        whiteFields.forEach(function(item, index) {
            if(index==3) {
                item.classList.add('white');
                item.classList.add('shogun');
                item.setAttribute('data-figure', 'sh');
            } else {
                item.classList.add('white');
                item.classList.add('farmer');
                item.setAttribute('data-figure', index<3 ? 'b'+(index+1) : 'b'+index );
            }
        })
        blackFields.forEach(function(item, index) {
            if(index==4) {
                item.classList.add('black');
                item.classList.add('shogun');
                item.setAttribute('data-figure', 'sh');
            } else {
                item.classList.add('black');
                item.classList.add('farmer');
                item.setAttribute('data-figure', index<4 ? 'b'+(index+1) : 'b'+index );
            }
            
        }) 
    }
    calculateMovesForPlayers() {
        this.whitePlayer.calculateMoves();
        this.blackPlayer.calculateMoves();
    }

    showPossibleMoves() {
        var whitePlayer = this.whitePlayer;
        var blackPlayer = this.blackPlayer;
        var busyFields = document.querySelectorAll('.farmer, .shogun');
        busyFields.forEach(function(item, index) {
            if(item.classList.contains('white')) {
                var possibleMoves = whitePlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
                item.setAttribute('data-moves', possibleMoves)
                var bobble = document.createElement('div');
                var bobbleText = document.createTextNode(possibleMoves)
                bobble.setAttribute('class', 'bobble');
                bobble.appendChild(bobbleText);
                item.append(bobble);
                item.addEventListener("click", this.pickUpFigure);
            }
            if(item.classList.contains('black')) {
                console.log('TEST');
                var possibleMoves = blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
                item.setAttribute('data-moves', possibleMoves)
                var bobble = document.createElement('div');
                var bobbleText = document.createTextNode(possibleMoves)
                bobble.setAttribute('class', 'bobble');
                bobble.appendChild(bobbleText);
                item.append(bobble);
                item.addEventListener("click", this.pickupFigure);
            }
        }, this)
    }
    pickUpFigure() {
        if(!this.classList.contains('farmer') && !(this.classList.contains('shogun'))) {
            return;
        }
        var possibleMoves = parseInt(this.getAttribute('data-moves'));
        var possibleTargets = new Object();
        var x = parseInt(this.getAttribute('data-x'));
        var y = parseInt(this.getAttribute('data-y'));
        switch(possibleMoves) {
            case 1:
                possibleTargets[1] = new Array(x+possibleMoves, y);
                possibleTargets[2] = new Array(x, y+possibleMoves);
                possibleTargets[3] = new Array(x-possibleMoves, y);
                possibleTargets[4] = new Array(x, y-1);
                break;
            case 2:
                possibleTargets[1] = new Array(x+possibleMoves, y);
                possibleTargets[2] = new Array(x, y+possibleMoves);
                possibleTargets[3] = new Array(x-possibleMoves, y);
                possibleTargets[4] = new Array(x, y-possibleMoves);

                possibleTargets[5] = new Array(x+1, y+1);
                possibleTargets[6] = new Array(x-1,y-1);
                possibleTargets[7] = new Array(x+1,y-1);
                possibleTargets[8] = new Array(x-1, y+1);
                break;
            case 3:
                possibleTargets[1] = new Array(x+possibleMoves, y);
                possibleTargets[2] = new Array(x, y+possibleMoves);
                possibleTargets[3] = new Array(x-possibleMoves, y);
                possibleTargets[4] = new Array(x, y-possibleMoves);

                possibleTargets[5] = new Array(x-1, y-2);
                possibleTargets[6] = new Array(x+1, y-2);
                possibleTargets[7] = new Array(x+1, y+2);
                possibleTargets[8] = new Array(x-1, y+2);
                possibleTargets[9] = new Array(x-2, y+1);
                possibleTargets[10] = new Array(x-2, y-1);
                possibleTargets[11] = new Array(x+2, y-1);
                possibleTargets[12] = new Array(x+2, y+1);
                break;
            case 4:
                possibleTargets[1] = new Array(x-possibleMoves, y);
                possibleTargets[2] = new Array(x+possibleMoves, y);
                possibleTargets[3] = new Array(x, y+possibleMoves);
                possibleTargets[4] = new Array(x, y-possibleMoves);

                possibleTargets[5] = new Array(x+1, y-3);
                possibleTargets[6] = new Array(x-1, y-3);
                possibleTargets[7] = new Array(x+3, y+1);
                possibleTargets[8] = new Array(x+3, y-1);
                possibleTargets[9] = new Array(x+1, y+3);
                possibleTargets[10] = new Array(x-1, y+3);
                possibleTargets[11] = new Array(x-3, y-1);
                possibleTargets[12] = new Array(x-3, y+1);

                possibleTargets[13] = new Array(x+2, y-2);
                possibleTargets[14] = new Array(x+2, y+2);
                possibleTargets[15] = new Array(x-2, y+2);
                possibleTargets[16] = new Array(x-2, y-2);
        }
        for(var target in possibleTargets) {
            possibleTargets[target].forEach(function(item, index) {
                console.log(item)
                if(item > 8 || item < 1) {
                    delete possibleTargets[target]
                }
            })
        }
        var allFields = document.querySelectorAll('.field');
        allFields.forEach(function(item, index) {
            item.classList.remove('possibleMove');
            item.classList.remove('active');
        })
        for (var target in possibleTargets) {
            var greenField = document.querySelector('[data-x="'+possibleTargets[target][0]+'"][data-y="'+possibleTargets[target][1]+'"]')
            if(!greenField.classList.contains('farmer') && !greenField.classList.contains('shogun')) {
                greenField.classList.add('possibleMove');
            }
        }
    }

    releaseFigure() {
        
    }
}

class Player {
    constructor(color) {
        this.figures = {
            positions: new Array(),
            b1: new Array(),
            b2: new Array(),
            b3: new Array(),
            b4: new Array(),
            b5: new Array(),
            b6: new Array(),
            b7: new Array(),
            sh: new Array(),
        }
        if(color == 'white') {
            this.figures.positions["b1"] = new Array(1,1);
            this.figures.positions["b2"] = new Array(2,1);
            this.figures.positions["b3"] = new Array(3,1);
            this.figures.positions["b4"] = new Array(5,1);
            this.figures.positions["b5"] = new Array(6,1);
            this.figures.positions["b6"] = new Array(7,1);
            this.figures.positions["b7"] = new Array(8,1);
            this.figures.positions["sh"] = new Array(4,1);
        }
        if(color == 'black') {
            this.figures.positions["b1"] = new Array(1,8);
            this.figures.positions["b2"] = new Array(2,8);
            this.figures.positions["b3"] = new Array(3,8);
            this.figures.positions["b4"] = new Array(4,8);
            this.figures.positions["b5"] = new Array(6,8);
            this.figures.positions["b6"] = new Array(7,8);
            this.figures.positions["b7"] = new Array(8,8);
            this.figures.positions["sh"] = new Array(5,8);
        }
    }
    calculateMoves() {
        for(var figure in this.figures) {
            if(figure != 'positions') {
                if(figure != 'sh') {
                    for(var i=1; i<65; i++) {
                        this.figures[figure].push(Math.floor(Math.random() * (5 - 1)) + 1);
                    }
                } else {
                    for(var i=1; i<65; i++) {
                        this.figures[figure].push(Math.floor(Math.random() * (3 - 1)) + 1);
                    }
                }
            }
        }
    }
}