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

robot = document.getElementById('robot');

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

robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;

let scale = 1

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

const tr = {x: canvas.width/2 + canvasOffsetX, y: canvas.height/2 + canvasOffsetY, a: 0}
ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)

reset.style.top = canvasOffsetY * 2 + "px";
reset.style.right = canvasOffsetX * 2 + "px";

let lineWidth = 2;
let strokeColor = "red"
let drawings = [];
let crosses = [];

ctx.lineWidth = lineWidth;
ctx.lineCap = 'square';
ctx.strokeStyle = strokeColor;
ctx.fillStyle = "red";

const wall = (x, y) => {
    console.log(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5);
    ctx.fillRect(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5);
    ctx.stroke();
    ctx.beginPath();
}

const drawCross = (x, y) => {
    ctx.moveTo(x - 5, y - 5);
    ctx.lineTo(x + 5, y + 5);
    ctx.moveTo(x + 5, y - 5);
    ctx.lineTo(x - 5, y + 5);
    ctx.stroke();
    ctx.beginPath();
}

canvas.addEventListener('mousedown', (e) => {
    crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY});
    moveTo(-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale)

    //tr.a = Math.atan((e.layerX - canvasOffsetX - canvas.width/2)/(e.layerY - canvasOffsetY - canvas.height/2))
    if ( e.layerY - canvasOffsetY > canvas.height/2 )
    {
        tr.a += Math.PI
    }

    update()
});

client.on('message', function (topic, message) {
    let val = message.toString();
    if (message[0] >= 48 && message[0] < 58)
	drawings.push({x: 0, y: -((parseInt(val) - 30) * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
    update();
});
/* canvas.addEventListener('touchstart', (e) => {
    drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY);
    crosses.push({x: e.targetTouches[0].layerX - canvasOffsetX, y: e.targetTouches[0].layerY - canvasOffsetY});
    // moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale)

    tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2))
    if ( e.targetTouches[0].layerY - canvasOffsetY > canvas.height/2 )
    {
        tr.a += Math.PI
    }

    // if wall detected then 
    // drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
    
    update()
});
 */

reset.onclick = () => {
    drawings = [];
    crosses = [];
    tr.x = canvas.width/2 + canvasOffsetX
    tr.y = canvas.height/2 + canvasOffsetY
    tr.a = 0
    update();
}

function resizeCanvas() {
    canvas.width = window.innerWidth - canvasOffsetX * 2;
    canvas.height = window.innerHeight - canvasOffsetY * 2;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';
    ctx.fillStyle = "red";
    robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
    robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
}

function redrawCanvas(){
    drawings.forEach(element => {
        ctx.setTransform(1, 0, 0, 1, 0, 0)

	ctx.translate(tr.x, tr.y)
        // ctx.translate(element.tr.x, element.tr.y)
	ctx.rotate(tr.a)
        // ctx.rotate(element.tr.a)
        wall(element.x, element.y);
    });
}

function update(){
    resizeCanvas();
    ctx.setTransform(1,0,0,1,0,0);
    for (let cross of crosses){
        drawCross(cross.x, cross.y)
    }
    redrawCanvas();
}

const updateOnFrame = () => {
    update();
    requestAnimationFrame(updateOnFrame)
}

//updateOnFrame();
window.onresize = update;