class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}


var jsonLetter;

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

ctx.strokeStyle = "black";
ctx.lineWidth = 2;
canvas.addEventListener("mousedown",mousePressEvent);
canvas.addEventListener("mousemove",mouseMoveEvent);
canvas.addEventListener("mouseup",mouseReleaseEvent);

let drawing = false;
let lastPoint = new Point(0,0);
let letter_list = [];
let boundary_corners = new Array(4);
let matrix = makeArray(8,8);


function mousePressEvent(e){
    drawing = true;
    lastPoint = new Point(e.clientX,e.clientY);
    letter_list.push(lastPoint);

}

function mouseReleaseEvent(){
    drawing = false;
    ctx.beginPath();
}

function mouseMoveEvent(e){
    if(!drawing) return;
    ctx.lineCap = "round";

    ctx.lineTo(e.clientX, e.clientY);
    lastPoint = new Point(e.clientX,e.clientY);
    letter_list.push(lastPoint);
    ctx.stroke();

}

function paintLetter(){
    var max_x = letter_list[0].x;
    var min_x = letter_list[0].x;
    var max_y = letter_list[0].y;
    var min_y = letter_list[0].y;

    letter_list.forEach(point => {
        if(point.x >= max_x) max_x = point.x;
        if(point.x <= min_x) min_x = point.x;
        if(point.y >= max_y) max_y = point.y;
        if(point.y <= min_y) min_y = point.y;

    });

    var reszta_x = (max_x - min_x) % 8;
    var reszta_y = (max_y - min_y) % 8;

    var offset_x = 8 - reszta_x;
    var offset_y = 8 - reszta_y;

    max_x = max_x + offset_x;
    max_y = max_y + offset_y;

    boundary_corners[0] = new Point(min_x,min_y);
    boundary_corners[1] = new Point(max_x,min_y);
    boundary_corners[2] = new Point(max_x,max_y);
    boundary_corners[3] = new Point(min_x,max_y);

    var wd = boundary_corners[1].x - boundary_corners[0].x;
    var hg = boundary_corners[2].y - boundary_corners[1].y;

    //drawGrid(wd,hg,boundary_corners[0]);
    getVector(wd,hg,boundary_corners[0]);


}

function drawGrid(width,height,origin){
    var part_of_width = width / 8;
    var parth_of_height = height / 8;

    for (let i = 0; i < 9; i++) {
        ctx.beginPath();
        console.log(origin.y);
        ctx.moveTo(origin.x + part_of_width * i,origin.y);
        ctx.lineTo(origin.x + part_of_width * i,origin.y + height);
        ctx.moveTo(origin.x,origin.y + parth_of_height * i);
        ctx.lineTo(origin.x + width,origin.y + parth_of_height * i);
        ctx.stroke();

    }
}

function getVector(width,height,origin){

    var xi = 0;
    var yi = 0;

    letter_list.forEach((pos,i) =>{
        xi = ((pos.x - origin.x) * 8) / width;
        yi = ((pos.y - origin.y) * 8) / height;

        matrix[Math.floor(yi)][Math.floor(xi)] = 1;

    });

    let vector_list = [];

    for (let i = 0; i < 8; i++) {
        for (let k = 0; k < 8; k++) {
            vector_list.push(matrix[i][k]);

        }

    }

    for (let i = 0; i < vector_list.length; i++) {
        if(vector_list[i] == undefined) vector_list[i] = 0;


    }

    var letterValue = document.getElementById('letterBox').value;
    var result_vector = vectorized_result(letterValue.toLowerCase());

    console.log(letterValue);
    console.log(result_vector);

    jsonLetter = [
        {
            in: vector_list,
            out: result_vector
        }
    ]

    console.log(vector_list);
}




function makeArray(d1, d2) {
    var arr = [];
    for(let i = 0; i < d2; i++) {
        arr.push(new Array(d1));
    }
    return arr;
}

function vectorized_result(j){
    var list  = [0,0,0];

    if(j == 'k') list[0] = 1;
    else if(j == 'l') list[1] = 1;
    else if(j == 'y') list[2] = 1;


    return list;

}

function ClearScreen(){
    lastPoint = new Point(0,0);
    letter_list = [];
    boundary_corners = new Array(4);
    matrix = makeArray(8,8);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('letterBox').value = "";
    document.getElementById('wylosowana litera').innerHTML = "";
}