let canvas = null
let ctx = null;
let img = null;

let isDrawing = false;

// rectangle 
let x0 = 0;
let y0 = 0;
let x1 = 0;
let y1 = 0;

// color
let R = 0;
let G = 0;
let B = 0;

document.addEventListener("DOMContentLoaded", function(){
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    src = document.getElementById("current_color_stream");
    img = new Image();
    img.src = src.src;
    img.onload = function() {
        draw(ctx, img);
    };

    canvas.addEventListener("mousedown", e => {
        x0 = e.offsetX;
        y0 = e.offsetY;
        isDrawing = true;
    });

    canvas.addEventListener("mousemove", e => {
        if(isDrawing === true) {
            x1 = e.offsetX;
            y1 = e.offsetY;
            draw();
            update();
        }
    });

    canvas.addEventListener("mouseup", e => {
        if(isDrawing === true) {
            
        }
        isDrawing = false;
    });
});

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawImage();
    drawRectangle();
}

function drawImage(){
    ctx.drawImage(img, 0, 0)
}

function drawRectangle(){
    ctx.beginPath();
    ctx.lineWidth = "5";
    ctx.strokeStyle = "rgb(" + R + ", " + G + ", " + B + ")";
    ctx.rect(x0,y0,x1-x0,y1-y0);
    ctx.stroke();
}

function update() {
    var existingRow = document.getElementById("addWatchAreaRow")
    if (existingRow !== null) {
        updateRectInputs();
        return
    }
    var newWatchAreaTemplate = document.getElementById("newWatchAreaTemplate");
    var newWatchArea = newWatchAreaTemplate.content.cloneNode(true);
    var watchAreaTableBody = document.getElementById("watchAreas");
    watchAreaTableBody.appendChild(newWatchArea);
    updateRectInputs();
}

function submitNewArea(){
    let nameInput = document.getElementsByName("name")[0];
    if (nameInput.value.length == 0){
        nameInput.select();
        return;
    }
    let name = nameInput.value;
    document.getElementById("newWatchAreaForm").submit()
}

function updateRectInputs(){
    document.getElementsByName("R")[0].value = R;
    document.getElementsByName("G")[0].value = G;
    document.getElementsByName("B")[0].value = B;

    document.getElementsByName("x0")[0].value = x0;
    document.getElementsByName("y0")[0].value = y0;
    document.getElementsByName("x1")[0].value = x1;
    document.getElementsByName("y1")[0].value = y1;
}

let changeR = function(elem){R = elem.value; draw();}
let changeG = function(elem){G = elem.value; draw();}
let changeB = function(elem){B = elem.value; draw();}

let changeX0 = function(elem){x0 = elem.value; draw();}
let changeY0 = function(elem){y0 = elem.value; draw();}
let changeX1 = function(elem){x1 = elem.value; draw();}
let changeY1 = function(elem){y1 = elem.value; draw();}