function Modal(options){
    this.options = options;
}

Modal.prototype = {
    modalWrapper: '',

    show : function(){
        var _this = this;
        var opt = this.options;

        opt.modalClass != undefined || (this.options.modalClass = 'modal-dialog modal-dialog-scrollable');
        opt.cancelText != undefined || (this.options.cancelText = translate["modal-js-cancel-btn"]);
        opt.okText != undefined || (this.options.okText = translate["modal-js-ok-btn"]);

        let screenWidth = window.screen.width > 768;

        /**
         * Just set dataKeyboard to false on modal function initialization when escape button has to be disabled.
         * example: new Modal({dataKeyboard : false});
         * */
        if (opt.dataKeyboard == undefined)
            opt.dataKeyboard = true;

        this.modalWrapper = $(`<div class="modal fade" id="alert-modal" ${screenWidth ? 'data-bs-theme="light"' : ''} data-backdrop="static" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="${opt.dataKeyboard}"></div>`);

        var modalInner = `<div class="${opt.modalClass}" role="document">
            <div class="modal-content" data-draggable-modal="true">
              <div class="modal-header">
                ${opt.dismissButton !== false ? '<button type="button" class="btn-close m-0" data-bs-dismiss="modal" aria-label="Close"></button>' : '' }
                <h3 class="modal-title">${opt.title}</h3>
              </div>
              <div class="modal-body">
                ${opt.body}
              </div>
              <div class="modal-footer">
                ${opt.buttonCancel !== false ? `<button id="alert-cancel" class="btn fc-btn-primary fc-btn" data-bs-dismiss="modal">${opt.cancelText}</button>` : ''}
                ${opt.buttonOK !== false ? `<button id="alert-confirm" class="btn fc-btn-primary fc-btn" >${opt.okText}</button>` : ''}
                </div>
            </div>
          </div>`;

        $('body').append(this.modalWrapper);
        this.modalWrapper.html(modalInner);
        this.modalWrapper.modal('show');

        this.modalWrapper.on('hidden.bs.modal', function (e) {
            _this.modalWrapper.remove();
        });

        if(isFunction(opt.confirm)){
            this.modalWrapper.find('#alert-confirm').click(opt.confirm);
        }

        if(isFunction(opt.cancel)){
            this.modalWrapper.find('#alert-cancel').click(opt.cancel);
        }
        
        if(opt.confirm == 'self.close'){
            this.modalWrapper.find('#alert-confirm').click(
                function(){
                    _this.modalWrapper.modal('hide');
                }
            );
        }
        
        if(opt.confirm == 'reload'){
            this.modalWrapper.find('#alert-confirm').click(
                function(){
                    window.location.reload();
                }
            );
        }

        let newModal = document.querySelectorAll(['[data-draggable-modal="true"]']);
        newModal = newModal[newModal.length -1];

        this.setDragModal(newModal);
    },

    hide : function(){
        this.modalWrapper.modal('hide');
    },

    setBody : function(body){
        this.modalWrapper.find('.modal-body').html(body);
    },

    replace: function(){
        var opt = this.options;

        opt.modalClass != undefined || (this.options.modalClass = 'modal-dialog');
        opt.cancelText != undefined || (this.options.cancelText = translate["modal-js-cancel-btn"]);
        opt.okText != undefined || (this.options.okText = translate["modal-js-ok-btn"]);
        opt.replaceId != undefined || (this.options.replaceId = '#alert-modal');

        var modalInner = '<div class="'+opt.modalClass+'">'
            + '<div class="modal-content">'
              + '<div class="modal-header">'
                + '<h2 class="modal-title">'+opt.title+'</h2>'
              + '</div>'
              + '<div class="modal-body">'
                + opt.body
              + '</div>'
              + '<div class="modal-footer">';
                opt.buttonOK !== false ? modalInner += '<button id="alert-confirm" class="btn fc-btn-primary fc-btn" >'+opt.okText+'</button>' : '';
                opt.buttonCancel !== false ? modalInner += '<button id="alert-cancel" class="btn fc-btn-primary fc-btn" data-bs-dismiss="modal">'+opt.cancelText+'</button>' : '';
                modalInner += '</div>'
            + '</div>'
          + '</div>';

        $(opt.replaceId).html(modalInner);

        if(isFunction(opt.confirm)){
            $(opt.replaceId).find('#alert-confirm').click(opt.confirm);
        }

        if(isFunction(opt.cancel)){
            $(opt.replaceId).find('#alert-cancel').click(opt.cancel);
        }
    },

    setDragModal: function(el) {
        thisObject = this;

        if (window.screen.width < 768) {
            const dragModal = el;
            const dragHeader = el.querySelector('.modal-header');
            let baseHeight;
            let offsetY;

            const move = (e) => {
                dragModal.style.top = `${e.touches[0].clientY - offsetY - (window.screen.height - baseHeight)}px`;
            }

            dragHeader.addEventListener("touchstart", (e) => {
                e.stopPropagation();
                baseHeight = dragModal.offsetHeight;
                
                offsetY = e.touches[0].clientY - dragModal.offsetTop;
                document.addEventListener("touchmove", move);
            })

            document.addEventListener("touchend", () => {
                if(parseInt(dragModal.style.top) > baseHeight/2){
                    thisObject.hide();
                } else {
                    dragModal.style.top = 0;
                }
                document.removeEventListener("touchmove", move);
            })
        }
    }

}