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

let isDrawing = false;

class WatchArea {
    constructor(name, x0, y0, x1, y1, R, G, B) {
        this.name = name;
        this.x0 = x0;
        this.y0 = y0;
        this.x1 = x1;
        this.y1 = y1;
        this.R = R;
        this.G = G;
        this.B = B;
    }

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

let watchArea = new WatchArea(
    "", 
    0, 0,
    0, 0,
    0, 0, 0
)

let watchAreas = [];

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 => {
        watchArea.x0 = e.offsetX;
        watchArea.y0 = e.offsetY;
        isDrawing = true;
    });

    canvas.addEventListener("mousemove", e => {
        if(isDrawing === true) {
            watchArea.x1 = e.offsetX;
            watchArea.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();
    watchAreas.forEach(watchArea => watchArea.draw(ctx));
    watchArea.draw(ctx);
}

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

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 = watchArea.R;
    document.getElementsByName("G")[0].value = watchArea.G;
    document.getElementsByName("B")[0].value = watchArea.B;

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

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

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