function buildComponent(tag, id, html){
    var el = document.createElement(tag.toLowerCase());
    if(id) el.id = id;
    if(typeof html === 'string') el.innerHTML = html;
    if(typeof html === 'object') el.appendChild(html);
    return el;
};

function getJSONFromDjango(method, url, callback, data) {
    var data = data || null
    var request = new XMLHttpRequest();
    var csrftoken = getCookie('csrftoken');
    request.addEventListener('load', callback.bind(null, request));
    request.open(method, url, true);
    request.setRequestHeader('X-CSRFToken', csrftoken);
    request.onerror = function() {
        console.log('error on request');
    };
    //create a modal to let the user know we're saving
    var saveModal = document.createElement('div');
    var loader = document.createElement('div');
    loader.classList.add('loader');
    saveModal.appendChild(loader);
    saveModal.close = false; //no close button
    saveModal.modalHed = "Saving changes"; //modal text content
    saveModal.wrapperClass = 'loading'; //add a wrapper class to the modal for styling
    var modal = modalBox(saveModal);
    request.send(data);
}

// hijack a form and submit with ajax
function ajaxHijack(form, func) {
    form.onsubmit = function(e) {
        e.preventDefault();
        func(e.target);
        return false;
    }
}

//global init for Color Picker
function initColorPicker(form){
    var notebook_form_inputs = form.getElementsByTagName('input');
    var p = form.getElementsByTagName('fieldset')['color-picker'];
    //document.getElementById('js-novi-backdrop').removeEventListener("click", handleMouseDown, true); 
    p.classList.add('top');
    p.popup = p.popup || new Picker({
        parent: p,
        color: 'blue',
        alpha: false,
        //editor: false,
        editorFormat: 'hex',
        onDone: function(color) {
            this.settings['parent'].style.backgroundColor = color.rgbString;
            notebook_form_inputs['color_rgb'].value = color.rgbString;
        },
    });
}

function get_login_form() {
    getJSON('GET', '/login/', function(e){
        console.log(e); 
    });
}

//first define your getCookie function
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

//Global init for Quill 
function initQuill(el) {
    var container = document.querySelector(el);
    const q = new Quill(container, {
        modules: {
            syntax: true,              // Include syntax module
            toolbar: [
                [{ header: [1, 2, 3, 4, false] }],
                ['bold', 'italic', 'underline', 'blockquote'],
                [{ 'list': 'bullet'}, { 'list': 'ordered'},{ 'list': 'check'} ],
                ['link', 'code-block', 'image', 'video', 'formula',],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
            ] 
        },
        theme: 'snow',
        enable: false
    });
    var t = Quill.find(container)
    q.on('text-change', function(delta, oldDelta, source) {
        t.change = true;
    });
    return t;
}

//global modal function, give a DOM element, puts it in a model box.
function modalBox(content, btn){
    // if passed a btn object get data from that, otherwise check the content object
    if (btn) {
        var type = btn.dataset.modalHedClass;
        var headline = btn.dataset.modalHed;
    } else {
        var type = content.hedClass || ''; 
        var headline = content.modalHed || '';
    }
    if (window.elemsRemoved !== undefined) {
        content = window.elemsRemoved;
    }
    var options = {
        type : type, 
        headline : headline,
        content : content,
        cancelText : 'X',
        confirmText : 'OK',
        cancelAction : function(){},
        confirmAction : function(){},
        reject : false,
        class : content.wrapperClass
    };
    //build the modal
    console.log(options.class);
    var overlay = buildComponent('div', options.class);
    var outermodal = buildComponent('div', 'overlay-wrapper');
    var innermodal = buildComponent('div', 'modal');
    var headline = buildComponent('header', false, options.headline);
    headline.className = 'hed';
    content.classList.remove('hide');
    var content = buildComponent('div', 'content-wrapper', options.content);
    var hed_wrapper = buildComponent('div', 'hed-wrapper');
    hed_wrapper.appendChild(headline);
    console.log("close var is: ",options.content.close);
    var actions = buildComponent('div', 'close-btn');
    var cancel = buildComponent('button', 'modalCancel', options.cancelText);
    cancel.classList.add('btn', 'btn-hollow', 'btn-light');
    actions.appendChild(cancel);
    if (options.content.close !== false) {
        hed_wrapper.appendChild(actions); //actions includes action buttons
    }
    innermodal.appendChild(hed_wrapper);
    innermodal.appendChild(content);
    overlay.appendChild(outermodal);
    outermodal.appendChild(innermodal); //innermodal includes headline & content
    document.body.appendChild(overlay);
    window.overlay = overlay;
    //handle removing modals 
    overlay.destroy = function(){
        if(overlay.parentNode === document.body) {
            var wrapper = document.querySelector('#content-wrapper').firstChild;
            window.elemsRemoved = wrapper;
            wrapper.remove();
            overlay.parentNode.removeChild(overlay);
        }
    }
    //add event handlers
    overlay.addEventListener('click', function(e){
        if(e.target === overlay){
            options.cancelAction();
            overlay.destroy();
        }
    });
  
    cancel.addEventListener('click', function(e){
        options.cancelAction();
        overlay.destroy();
    });
    return overlay;
};

/**
 * Check whether editor content is empty or not.
 * @return {Bool}
 */
function isQuillEmpty(quill) {
    return quill.getContents().ops[0].insert == '\n' && quill.getLength() < 2;
}
function isEmpty(quill) {
    const commentText = quill.getText().trim();
    console.log(commentText);
    const re = /^<p>(<br>|<br\/>|<br\s\/>|\s+|\r)<\/p>$/gm;
    return re.test(commentText);
};

function addNotebookModal(notebookAddForm, btn) {
    initColorPicker(notebookAddForm);    
    ajaxHijack(notebookAddForm, notebookCreate)
    btn.content = notebookAddForm.parentNode;
    addHandler(btn);
    function addHandler(el){
        el.addEventListener('click', function(e){
            e.preventDefault();
            var modalContent = e.target.content; 
            modalContent.wrapperClass = 'overlay'; //add a wrapper class to the modal for styling
            var modal = modalBox(modalContent, el);
        });
    }
}