modal

function ensureElement (node, tag) {
    const el = document.createElement(tag);
    node.appendChild(el);
    return el;
}

function ensureElementWithAttr(node, tag, attrs) {
    const el = ensureElement(node, tag);
    for (var attr in attrs) {
        el.setAttribute(attr, attrs[attr]);
    }
    return el;
}

function buildModalFooter(modal_content, config) {
    var modal_footer = ensureElementWithAttr(modal_content, 'div', {class: "modal-footer"});
    for (var button in config.buttons) {
        var btn = config.buttons[button];
        ensureElementWithAttr(modal_footer, 'button', btn.config).innerText = btn.text;
    }

    return modal_footer;
}

function buildModal (config) {
    const modals = document.querySelector('.modals');
    var modal = ensureElementWithAttr(modals, 'div', {class: "modal", role: "dialog", tabindex: "-1", id: config.id});
    var modal_dialog = ensureElementWithAttr(modal, 'div', {class: "modal-dialog", role: "document"});
    var modal_content = ensureElementWithAttr(modal_dialog, 'div', {class: "modal-content"});
    var modal_header = ensureElementWithAttr(modal_content, 'div', {class: "modal-header"});
    ensureElementWithAttr(modal_header, 'h5', {class: "modal-title"}).innerText = config.title;
    ensureElementWithAttr(modal_content, 'div', {class: "modal-body"}).innerHTML = config.body;

    buildModalFooter(modal_content, config);
}

function loadModal(config) {
    if (!config) {
        config = {}
    }

    if (!config.message) {
        config.message = "Houve um erro em nossos computadores";
    }

    if (!config.title) {
        config.title = "Aviso";
    }

    if (!config.body) {
        config.body = config.message;
    }

    if (!config.id) {
        config.id = config.title.toCamelCase().replace(" ", '');
    }

    if (!config.buttons) {
        config.buttons = [
            {
                "text": "Fechar",
                "config": {
                    "class": "btn btn-primary",
                    "data-dismiss": "modal"
                }
            }
        ]
    }

    if (config.id) {
        var modal = document.querySelector(`.modal[id="${config.id}"]`);
        if (modal) {
            var title = modal.querySelector('[class="modal-title"]').innerText = config.title;
            var body = modal.querySelector('[class="modal-body"]').innerHTML = config.body;
        } else {
            buildModal(config);
        }
    }

    $(`.modal[id="${config.id}"]`).modal('show');
}

function loadWarningModal (config) {
    if (!config.id) {
        config.id = "aviso";
    }

    loadModal(config);
}