class Note{
    constructor(id, divCanvas, x, y, width, height, content) {
        this.id = id;
        this.divCanvas = divCanvas;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.element = null;
        this.content = content;
    }

    refresh(){
        if (this.element !== null){
            this.element.remove();
        }

        this.element =  $(`
<div class="card div-note" data-id="${this.id}">
  <div class="card-body">
    ${this.content}
  </div>
</div>`);
        this.element.draggable({
            containment: "parent",
            stop: function( event, ui ) {
                let id = parseInt($(this).attr('data-id'));
                let note = getNote(id);
                note.x = ui.position.left;
                note.y = ui.position.top;
                console.log(ui.position);
            }
        });
        this.element.resizable({
            handles: 'se',
            autoHide: true,
            minHeight: 240,
            minWidth: 300,
        });
        this.element.css({
            'width': this.width + 'px',
            'height': this.height + 'px',
            'position': 'relative'
        });
        this.element.on( "dblclick", function() {
            openModalEditNote(parseInt($(this).attr('data-id')));    
        });
        
        this.divCanvas.append(this.element);
        this.setPosition();
    }

    setPosition(){
        this.element.css({
            'left': this.x + 'px',
            'top': this.y + 'px'
        });
    }
}