//===== Constructor

const Grid = function() {
    this.colors = {};
    this.obstacles = {};
    this.robots = [];
    this.walls = [];

    this.squaresPerSide = 20;
    this.squareSideLength = 0;
    
    document.addEventListener('L-stack', this.msgStack.bind(this));

    document.addEventListener('G-robots', this.msgRobots.bind(this));
    document.addEventListener('G-walls', this.msgWalls.bind(this));

    window.addEventListener('resize', this.debounce(this.onResize.bind(this), 500));

    this.onResize();
};

//===== UI drawing

Grid.prototype.drawSquares = function() {
    const grid = document.getElementById('content-grid');
    grid.querySelectorAll('.content-square').forEach(el => el.parentNode.removeChild(el));

    const s = this.squareSideLength;

    for (let i = 0; i < this.squaresPerSide; i++) {
        for (let j = 0; j < this.squaresPerSide; j++) {

            const square = document.createElement('div');
            square.className = 'content-square';
            
            square.style.height = `${s}px`;
            square.style.width = `${s}px`;

            square.style.left = `${i * s}px`;
            square.style.top = `${j * s}px`;

            grid.appendChild(square);
        }
    }
};

Grid.prototype.drawWalls = function() {
    const grid = document.getElementById('content-grid');
    grid.querySelectorAll('.content-wall-x').forEach(el => el.parentNode.removeChild(el));
    grid.querySelectorAll('.content-wall-y').forEach(el => el.parentNode.removeChild(el));

    const s = this.squareSideLength;

    this.walls.forEach(edge => {
        const [i1, j1, i2, j2] = edge.split('-');

        const wall = document.createElement('div');
        wall.title = edge;

        wall.style.left = `${i1 * s}px`;
        wall.style.top = `${j1 * s}px`;

        if (i1 === i2) {
            wall.className = 'content-wall-y';
            wall.style.height = this.squareSideLength + 'px';
        } else {
            wall.className = 'content-wall-x';
            wall.style.width = this.squareSideLength + 'px';
        }

        grid.appendChild(wall)
    });
};

Grid.prototype.drawRobots = function() {
    const grid = document.getElementById('content-grid');
    grid.querySelectorAll('.content-robot').forEach(el => el.parentNode.removeChild(el));

    const s = this.squareSideLength;

    this.robots.forEach(({ id, i, j }) => {
        const color = this.colors[id];

        const robot = document.createElement('div');
        robot.className = 'content-robot';
        
        robot.style.background = `radial-gradient(circle at ${s/3}px ${s/3}px, ${color} 10%, #000)`;
        robot.style.borderRadius = (s / 2) + 'px';

        robot.style.height = s + 'px';
        robot.style.width = s + 'px';

        robot.style.left = `${i * s}px`;
        robot.style.top = `${j * s}px`;

        grid.appendChild(robot);
    });
};

Grid.prototype.drawArrows = function() {
    const grid = document.getElementById('content-grid');
    grid.querySelectorAll('.content-arrows').forEach(el => el.parentNode.removeChild(el));

    const s = this.squareSideLength;

    this.robots.forEach(({ id, i, j }) => {
        const arrows = document.createElement('div');
        arrows.id = `arrows-${id}`;
        arrows.className = 'content-arrows';

        arrows.dataset.i = i;
        arrows.dataset.j = j;
        arrows.dataset.id = id;

        arrows.style.left = `${i * s - s}px`;
        arrows.style.top = `${j * s - s}px`;
        
        const up = this.drawArrow({ direction: 'up', label: '&#9650;', left: (s * 1.25), top: (s * 0.5) });
        const down = this.drawArrow({ direction: 'down', label: '&#9660;', left: (s * 1.25), top: (s * 2) });
        const left = this.drawArrow({ direction: 'left', label: '&#9664;', left: (s * 0.5), top: (s * 1.25) });
        const right = this.drawArrow({ direction: 'right', label: '&#9654;', left: (s * 2), top: (s * 1.25) });

        arrows.appendChild(up);
        arrows.appendChild(down);
        arrows.appendChild(left);
        arrows.appendChild(right);

        grid.appendChild(arrows);
    });
};

Grid.prototype.drawArrow = function({ direction, label, left, top, parentId }) {
    const s = this.squareSideLength / 2;

    const arrow = document.createElement('div');
    arrow.className = 'content-arrow';
    arrow.innerHTML = label;

    arrow.style.left = left + 'px';
    arrow.style.top = top + 'px';
    arrow.style.lineHeight = s + 'px';
    arrow.style.height = s + 'px';
    arrow.style.width = s + 'px';

    arrow.dataset.direction = direction;
    arrow.dataset.parent = parentId;

    arrow.addEventListener('click', this.onArrowClick.bind(this));

    return arrow;
};

//===== Obstacle logic
// i and j are notations for the grid of squares.
// x and y are notations for absolute pixels.
//
// "Obstacles" is a lookup table. Values irrelevant. Keys are obstacles.
// Edge obstacle key: i1-j1-i2-j2
// Robot obstacle key: i-j

Grid.prototype.updateObstacles = function() {
    this.obstacles = {};

    this.walls.forEach(edge => { this.obstacles[edge] = true; });

    this.robots.forEach(({ i, j }) => { this.obstacles[`${i}-${j}`] = true; });
};

Grid.prototype.updateArrowVisibilities = function() {
    this.robots.forEach(({ id, i, j }) => {
        const ijR = `${i + 1}-${j}`; 
        const ijL = `${i - 1}-${j}`; 
        const ijU = `${i}-${j - 1}`; 
        const ijD = `${i}-${j + 1}`; 

        const edgeR = `${i + 1}-${j}-${i + 1}-${j + 1}`;
        const edgeL = `${i}-${j}-${i}-${j + 1}`;
        const edgeU = `${i}-${j}-${i + 1}-${j}`;
        const edgeD = `${i}-${j + 1}-${i + 1}-${j + 1}`;

        const arrows = document.getElementById(`arrows-${id}`);
        arrows.querySelector("[data-direction='right']").style.display = (this.obstacles[ijR] || this.obstacles[edgeR] || i === (this.squaresPerSide - 1)) ? 'none' : 'block';
        arrows.querySelector("[data-direction='left']").style.display = (this.obstacles[ijL] || this.obstacles[edgeL] || i === 0) ? 'none' : 'block';
        arrows.querySelector("[data-direction='up']").style.display = (this.obstacles[ijU] || this.obstacles[edgeU] || j === 0) ? 'none' : 'block';
        arrows.querySelector("[data-direction='down']").style.display = (this.obstacles[ijD] || this.obstacles[edgeD] || j === (this.squaresPerSide - 1)) ? 'none' : 'block';
    });
};

Grid.prototype.findNextObstacle = function({ direction, i, j }) {
    const sps = this.squaresPerSide;
    const obstacles = this.obstacles;

    switch (direction) {
        case 'right':
            for (let ii = i + 1; ii < sps; ii++) {
                const edge = `${ii + 1}-${j}-${ii + 1}-${j + 1}`;
                const ij = `${ii + 1}-${j}`;

                if (obstacles[ij] || obstacles[edge] || ii === (sps - 1)) {
                    return { i: ii, j };
                }
            }
            break;
        case 'left':
            for (let ii = i - 1; ii >= 0; ii--) {
                const edge = `${ii}-${j}-${ii}-${j + 1}`;
                const ij = `${ii - 1}-${j}`;

                if (obstacles[ij] || obstacles[edge] || ii === 0) {
                    return { i: ii, j };
                }
            }
            break;

        case 'up':
            for (let jj = j - 1; jj >= 0; jj--) {
                const edge = `${i}-${jj}-${i + 1}-${jj}`;
                const ij = `${i}-${jj - 1}`;

                if (obstacles[ij] || obstacles[edge] || jj === 0) {
                    return { i, j: jj };
                }
            }
            break;

        case 'down':
            for (let jj = j + 1; jj < sps; jj++) {
                const edge = `${i}-${jj + 1}-${i + 1}-${jj + 1}`;
                const ij = `${i}-${jj + 1}`;

                if (obstacles[ij] || obstacles[edge] || jj === (sps - 1)) {
                    return { i, j: jj };
                }
            }
            break;
    }

    throw Error("Could not find next obstacle, no direction found. ", direction, i, j);
};

//===== DOM event handlers

Grid.prototype.onArrowClick = function(evt) {
    const parent = evt.currentTarget.parentNode;
    const direction = evt.currentTarget.dataset.direction;

    const id = parent.dataset.id;
    const i1 = parent.dataset.i;
    const j1 = parent.dataset.j;

    const { i, j } = this.findNextObstacle({ direction, i: i1 * 1, j: j1 * 1 });

    const evtMove = new CustomEvent('L-arrow', { detail: { id, i, j } });
    document.dispatchEvent(evtMove);
};

Grid.prototype.onResize = function() {
    const controlBounds = document.getElementById('controls-container').getBoundingClientRect();
    const contentBounds = document.getElementById('content-container').getBoundingClientRect();
    const grid = document.getElementById('content-grid');

    const h = contentBounds.height - 40;
    const w = contentBounds.width - controlBounds.right - 40;
    const min = Math.min(h, w);
    this.squaresPerSide = 20;

    // Centering
    const offsetX = (min === h) ? ((w - min) / 2) : 0;
    const offsetY = (min === h) ? 0 : ((h - min) / 2);

    this.squareSideLength = Math.floor(min / this.squaresPerSide);

    // Origin (top left)
    const x0 = controlBounds.left + controlBounds.width + 40 + offsetX;
    const y0 = contentBounds.top + 40 + offsetY;

    grid.style.left = `${x0}px`;
    grid.style.top = `${y0}px`;

    this.drawSquares();
    this.drawWalls();
    this.drawRobots();
    this.drawArrows(); 

    this.updateArrowVisibilities();
};

Grid.prototype.debounce = function(fn, ms) {
    let timer = null;

    return () => {
        clearTimeout(timer);
        timer = setTimeout(fn, ms);
    }
};

//===== Message handlers

Grid.prototype.msgStack = function(evt) {
    const latestPositions = evt.detail.reduce((acc, { id, i, j }) => {
        acc[id] = { id, i, j };
        return acc;
    }, {});

    this.robots = Object.values(latestPositions);

    this.drawRobots();
    this.drawArrows();

    this.updateObstacles();
    this.updateArrowVisibilities();
};

Grid.prototype.msgWalls = function(evt) {
    this.walls = evt.detail.body;

    this.drawWalls();

    this.updateObstacles();
    this.updateArrowVisibilities();
};

Grid.prototype.msgRobots = function(evt) {
    // Do not assign position or redraw here: movements are fully managed using the stack.
    this.colors = evt.detail.body.reduce((acc, { color, id }) => {
        acc[id] = color;
        return acc;
    }, {});
};


//============ THE TRASH BIN OF HISTORY
// Content.prototype.drawRobot = function({ id, i, j }) {
//     const robot = document.getElementById(`robot-${id}`);
//     const arrows = document.getElementById(`arrows-${id}`);

//     const { x, y } = this.ijToXy({ i, j });
//     const s = this.squares.sideLength;

//     robot.style.display = 'block';
//     robot.style.left = x + 'px';
//     robot.style.top = y + 'px';
//     robot.dataset.i = i;
//     robot.dataset.j = j;

//     this.robots[`${i}-${j}`] = id;

//     arrows.style.display = 'block';
//     arrows.style.left = (x - s) + 'px';
//     arrows.style.top = (y - s) + 'px';
// };

// Content.prototype.ijToXy = function({ i, j }) {
//     if ((i !== 0 && !i) || (j !== 0 && !j)) {
//         return
//     }

//     return {
//         x: this.squares.x0 + i * this.squares.sideLength,
//         y: this.squares.y0 + j * this.squares.sideLength
//     }
// };