const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;

function circle_factory(name, circle_var, x, y, start, end, color, income) {
    circle_var = new Path2D()
    circle_var.arc(x, y, 50, start, end * Math.PI);
    ctx.fillStyle = color;
    circle_var.closePath()
    ctx.fill(circle_var);

    this.name = name;
    this.circle_var = circle_var
    this.x = x
    this.y = y
    this.start = start
    this.end = end
    this.color = color
    this.income = income
    this.click = 1
}

var circle_1 = new circle_factory('one', circle_1, 250, 75, 0, 2, 'violet')
var circle_2 = new circle_factory('two', circle_2, 380, 75, 0, 2, 'gray')
var circle_3 = new circle_factory('three', circle_3, 510, 75, 0, 2, 'gray')
var circle_4 = new circle_factory('four', circle_4, 640, 75, 0, 2, 'gray')
var circle_5 = new circle_factory('five', circle_5, 250, 205, 0, 2, 'gray')
var circle_6 = new circle_factory('six', circle_6, 380, 205, 0, 2, 'gray')

var circle_array = [];
var circle_array_standard = [];

circle_array.push(circle_1.circle_var, circle_2.circle_var, circle_3.circle_var, circle_4.circle_var, circle_5.circle_var, circle_6.circle_var)
circle_array_standard.push(circle_1, circle_2, circle_3, circle_4, circle_5, circle_6);
collected_elements = []
collected_elements.push('circle_1', 'circle_2', 'circle_3')
var selected = [];


canvas.addEventListener("click", function(event) {
    var c_1_click = ctx.isPointInPath(circle_1.circle_var, event.offsetX, event.offsetY)
    var c_2_click = ctx.isPointInPath(circle_2.circle_var, event.offsetX, event.offsetY)
    var c_3_click = ctx.isPointInPath(circle_3.circle_var, event.offsetX, event.offsetY)
    var c_4_click = ctx.isPointInPath(circle_4.circle_var, event.offsetX, event.offsetY)
    var c_5_click = ctx.isPointInPath(circle_5.circle_var, event.offsetX, event.offsetY)
    var c_6_click = ctx.isPointInPath(circle_6.circle_var, event.offsetX, event.offsetY)

    for (var i = 0; i <= circle_array.length - 1; i++) {
        if (circle_array[i] && ctx.isPointInPath(circle_array[i], event.offsetX, event.offsetY)) {
            //$('#comments').append("<p>It works</p>");
            ctx.fillStyle = 'orange';
            ctx.fill(circle_array[i]);

            if (!collected_elements.includes('circle_7')) {
                collected_elements.push('circle_7')
                var circle_7 = new circle_factory('seven', circle_7, 580, 205, 0, 2, 'blue')
                var c_7_click = ctx.isPointInPath(circle_7.circle_var, event.offsetX, event.offsetY)

                if (!circle_array.includes(circle_7.circle_var)) {
                    console.log('doesnt include', circle_array, ' ', circle_array_standard)
                    circle_array.push(circle_7.circle_var)
                    circle_array_standard.push(circle_7)
                    console.log('circle array: ', circle_array, 'circle standard: ', circle_array_standard)
                }
            }

            if (selected.length == 0) {
                selected.push(circle_array_standard[i]);
                ctx.fillStyle = 'green';
                ctx.fill(selected[0].circle_var);
            } else if (selected.length == 1) {
                selected.push(circle_array_standard[i]);

                ctx.fillStyle = 'yellow';
                ctx.fill(selected[1].circle_var);
                console.log('sel 1 is ', selected[1]);

            }

            if (c_7_click) {
                console.log('blue circle')
            }
        }
    } /*end for loop*/

    function reset() {
        if (!c_1_click && !c_2_click && !c_3_click && !c_4_click && !c_5_click && !c_6_click && !c_7_click) {
            console.log('first reset')

            if (typeof selected[0] !== 'undefined') {
                console.log('this ', selected[0].income)
                if (typeof selected[1] != 'undefined') {
                    ctx.fillStyle = selected[0].color;
                    ctx.fill(selected[0].circle_var);
                    ctx.fillStyle = selected[1].color;
                    //ctx.fillStyle = circle_7.circle_var;
                    ctx.fill(selected[1].circle_var);
                    selected.length = 0;
                }
            }
        };
    }
    reset()
}); // end event listener