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

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

        this.element =  $(`
<div class="card div-note ${this.colorClass}" 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;
            }
        });
        this.element.resizable({
            handles: 'se',
            autoHide: true,
            minHeight: 240,
            minWidth: 300,
        });
        this.element.css({
            'width': this.width + 'px',
            'height': this.height + 'px',
            'position': 'relative',
            'z-index': this.zindex
        });
        this.element.on( "dblclick", function() {
            openModalEditNote(parseInt($(this).attr('data-id')));    
        });

        $.contextMenu({
            selector: '.card[data-id="' + this.id + '"]',
            callback: function(key, options) {
                let id = parseInt($(this).attr('data-id'));
                switch (key){
                    case 'toFront':
                        noteChangeZindex(id, true)
                        break;
                    case 'toBack':
                        noteChangeZindex(id, false)
                        break;
                    case 'edit':
                        openModalEditNote(id);
                        break;
                    case 'delete':
                        deleteNote(id);
                        break;
                }
            },
            items: {
                "toFront": { 
                    icon: function(opt, $itemElement, itemKey, item){
                        $itemElement.html('<i class="fas fa-reply"></i>&nbsp;V odspredje');
            
                        return 'context-menu-icon-updated';
                    }
                },
                "toBack": { 
                    icon: function(opt, $itemElement, itemKey, item){
                        $itemElement.html('<i class="fas fa-share"></i>&nbsp;V ozadje');
            
                        return 'context-menu-icon-updated';
                    }
                },

                "edit": { 
                    icon: function(opt, $itemElement, itemKey, item){
                        $itemElement.html('<i class="fas fa-edit"></i>&nbsp;Uredi');
            
                        return 'context-menu-icon-updated';
                    }
                },
                
                "delete": { 
                    icon: function(opt, $itemElement, itemKey, item){
                        $itemElement.html('<i class="fas fa-trash-alt"></i>&nbsp;Izbriši');
            
                        return 'context-menu-icon-updated';
                    }
                },
            }
        });
        
        this.divCanvas.append(this.element);
        this.setPosition();
    }

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