const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
const reset = document.getElementById("reset");

robot = document.getElementById('robot');
cross = document.getElementById('cross');

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;

let scale = 2
let angle = 0
let drawings = []

canvas.width = window.innerWidth - canvasOffsetX * 2;
canvas.height = window.innerHeight - canvasOffsetY * 2;

ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)

reset.style.top = canvasOffsetY * 2 + "px";
reset.style.right = canvasOffsetX * 2 + "px";
robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%"
robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *100 + "%"

class Wall {
    constructor(x,y,a) {
        this.x = x
        this.y = y
        this.h = 5
        this.a = a
    }

    draw(context) {
        context.fillRect(this.x - robot.offsetWidth/2, this.y - this.h/2,robot.offsetWidth,this.h)
    }
}

canvas.addEventListener('mousedown', (e) => {
    cross.style.visibility = "visible";

    x = e.layerX - canvas.width/2 - 2*canvasOffsetX
    y = e.layerY - canvas.height/2 - 2*canvasOffsetY
    cross.style.left = e.layerX - canvasOffsetX + "px"
    cross.style.top = e.layerY - canvasOffsetY + "px"

    angle = Math.atan(x/Math.abs(y))

    sym = 1
    if (x < 0) {
        sym = -1
    }

    if (y > 0) {
        angle = sym*Math.PI - angle
    }

    robot.style.transform = 'translate(-50%, -50%) rotate('+ angle +'rad)';
    moveTo(x * scale,y * scale)
    
    moveAll(x,y)
});

client.on('message', function (topic, message) {
    let val = message.toString();
    var n = parseInt(val);
    if (!isNaN(n)){
        if (n < 150){
	        wall = new Wall(n * Math.sin(angle), - n * Math.cos(angle), angle)
            drawings.push(wall)
            draw(wall)
        }
    }
});

/*
function test(wall) {
    drawings.push(wall)
    draw(wall)
}
*/

function draw(wall) {
            ctx.save()
            x = wall.x
            y = wall.y
            wall.x = 0
            wall.y = 0
            ctx.translate(x,y)
            ctx.rotate(wall.a)
            wall.draw(ctx)
            wall.x = x
            wall.y = y
            ctx.restore()
}

function moveAll(x,y) {
    a = canvas.width/2 + canvasOffsetX
    b = canvas.height/2 + canvasOffsetY
    ctx.clearRect(-a,-b,canvas.width,canvas.height)

    drawings.forEach((e) => {
        e.x -= x
        e.y -= y
        draw(e) 
    })
}

reset.onclick = () => {
    drawings = [];
    angle = 0
    robot.style.transform = 'translate(-50%, -50%) rotate(0deg)';
}

function resizeCanvas() {
    canvas.width = window.innerWidth - canvasOffsetX * 2
    canvas.height = window.innerHeight - canvasOffsetY *2
    reset.style.top = canvasOffsetY * 2 + "px";
    reset.style.right = canvasOffsetX * 2 + "px";
    robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%"
    robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *10

    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
    moveAll(0,0)
}

window.onresize = resizeCanvas;