class Selectable {
    is_selected = false;


    select() {
        this.is_selected = true;
    }
    unselect() {
        this.is_selected = false;
    }
    draw_selection() {

    }
}


class Screen {
    elements = [];

    selectable_objects = [];
    current_selected_element;
    ctx;

    constructor(ctx) {
        this.ctx = ctx;

        this.onFrame = this.onFrame.bind(this);
    }

    addElement(elem) {
        this.elements.push(elem);
    }

    drawAll() {
        this.ctx.clearRect(0,0, windowSize.width, windowSize.height);
        this.elements.forEach(element => {
            this.ctx.save();
            element?.draw(this.ctx);
            this.ctx.restore();
        });
    }


    updateAll() {
        
        this.elements.forEach(element => {
            element?.update();
        });
    }


    onFrame() {
        this.drawAll();
        
        this.updateAll();

        requestAnimationFrame(this.onFrame);
    }

    select(obj) {
        obj.select();
        this.current_selected_element = obj;
    }
    unselect() {
        this.current_selected_element.unselect();
        this.current_selected_element = null;
    }
    makeSelectable(obj) {
        var select_obj = new Selectable();
        Object.assign(obj, select_obj);
        obj.select = select_obj.select;
        obj.unselect = select_obj.unselect;
        obj.draw_selection = select_obj.draw_selection;
        
        
    }
}

class MainMenu extends Screen{

    constructor(ctx) {
        super(ctx);
    }

    load() {
        requestAnimationFrame(this.onFrame);

        
    }

    
}








class Sprite {

}


class Shape {
    startX;
    startY;

    originX;
    originY;
    
    color;

    rotation = 0;

    draw(ctx) {
       
    }

    update() {
        
        
    }

    

    translate(x, y) {
        this.startX = x;
        this.startY = y;
    }
    translateX(x) {
        this.startX = x;
    }
    translateY(y) {
        this.startY = y;
    } 

}
class Rectangle extends Shape{
    width;
    height;

    constructor(startX, startY, width, height, color) {
        super()
        this.startX = startX;
        this.startY = startY;
        this.width = width;
        this.height = height;
        this.color = color;

        this.originX = startX;
        this.originY = startY;
    }

    draw(ctx) {
        ctx.translate(this.originX, this.originY); 
        ctx.rotate(this.rotation);
        ctx.translate(-(this.originX), -(this.originY)); 
        ctx.fillStyle = this.color;
        ctx.fillRect(this.startX,this.startY, this.width,this.height);

        if("is_selected" in this) {
            if(this.is_selected) {
                this.draw_selection(ctx);
            }
            
        }
    }
    drawStroke(ctx) {
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 5;
        ctx.strokeRect(this.startX, this.startY,this.width,this.height);
    }

    setCenterOrigin() {
        this.originX = this.startX + this.width / 2;
        this.originY = this.startY + this.height / 2;
    }
}

class Circle  extends Shape{
    radius;
}