class Note {
    constructor(x, y, w, h) {
        this.active = false; 
        this.dragging = false; 
        this.rollover = false;
        this.resizing = false;
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.offsetX = 0;
        this.offsetY = 0;
        this.startMouseX = 0;
        this.startMouseY = 0;
        this.startW = w;
        this.startH = h;
        this.text = "test123";
        this.fontSize = 32;
        this.clickedAt = 0;
    }

    over() {
        // Is mouse over object
        if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
            this.rollover = true;
        } else {
            this.rollover = false;
        }
    }

    update() {
        if (!this.active){
            return;
        }
        // Adjust location if being dragged
        if (this.resizing){
            this.w = this.startW + (mouseX - this.startMouseX);
            this.h = this.startH + (mouseY - this.startMouseY);
            if (this.w < 10){
                this.w = 10;
            } else if (this.x + this.w > canWidth) {
                this.w = canWidth - this.x;
            }

            if (this.h < 10){
                this.h = 10;
            } else if (this.y + this.h > canHeight) {
                this.h = canHeight - this.y;
            }

        } else if (this.dragging) {
            this.x = mouseX + this.offsetX;
            this.y = mouseY + this.offsetY;

            if (this.x < 0){
                this.x = 0;
            } else if (this.x + this.w > canWidth) {
                this.x = canWidth - this.w;
            }

            if (this.y < 0){
                this.y = 0;
            } else if (this.y + this.h > canHeight) {
                this.y = canHeight - this.h;
            }
        }

    }

    show() {
        fill(255);
        
        strokeWeight(1);
        // Different fill based on state
        if (this.resizing){
            stroke(0, 255, 0);    
        } else if (this.dragging) {
            stroke(0, 0, 255);    
        } else {
            stroke(150);
        }
        
        rect(this.x, this.y, this.w, this.h, 5);
        line(this.x, this.y + this.fontSize + 10, this.x + this.w, this.y + this.fontSize + 10);

        strokeWeight(0);
        stroke(0);
        fill(0);
        textSize(this.fontSize);
        textFont('Verdana')
        let w = textWidth(this.text);

        text(this.text, this.x + (this.w / 2) - (w / 2), this.y + 2, this.w - 4, this.h - 4);

    }

    pressed() {
        if (this.active){
            return;
        }
        // Did I click on the rectangle?
        if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
            //console.log(mouseButton === RIGHT);
            let newTime = moment().valueOf();
            
            if (!ctrl && newTime - this.clickedAt <= 500){
                console.log(newTime - this.clickedAt);
                console.log('double');
                return;
            }
            this.clickedAt = newTime;
            this.active = true;
            this.dragging = !ctrl;
            this.resizing = ctrl;
            
            this.startMouseX = mouseX;
            this.startMouseY = mouseY;
            this.offsetX = this.x - mouseX;
            this.offsetY = this.y - mouseY;
            this.startW = this.w;
            this.startH = this.h;
            return true;
        }
    }

    released() {
        this.active = false;
        this.dragging = false;
        this.resizing = false;
    }
}