; (function (root, factory) {
    // Browser globals
    root.Modal = factory();
}(typeof self !== 'undefined' ? self : this, function () {

    function createElement(name, className = null, options = {}) {
        let element = document.createElement(name);
        if (className) {
            element.classList = className;
        }
        for (let key in options) {
            element.setAttribute(key, options[key]);
        }
        return element;
    }

    function show(options) {

        let title = options.title;
        let message = options.message;
        let asHtml = options.asHtml ? options.asHtml : false;

        let confirmText = options.confirmText || 'Confirm';
        let confirmType = options.confirmType || 'primary';
        let onConfirm = options.onConfirm || function () { };

        let closeText = options.closeText || 'Close';
        let closeType = options.closeType || 'secondary';
        let onClose = options.onClose || function () { };

        let hideConfirmButton = typeof options.hideConfirmButton !== 'undefined' ? options.hideConfirmButton : false;
        let hideCloseButton = typeof options.hideCloseButton !== 'undefined' ? options.hideCloseButton : false;

        let centered = typeof options.centered !== 'undefined' ? options.centered : true;
        let backdrop = typeof options.backdrop !== 'undefined' ? options.backdrop : true;
        let keyboard = typeof options.keyboard !== 'undefined' ? options.keyboard : true;
        let focus = typeof options.focus !== 'undefined' ? options.focus : true;

        let myModal = null;
        let container = createElement('div', 'modal fade', {
            'tabindex': '-1',
            'aria-hidden': 'true'
        });

        let modalDialog = createElement('div', [
            'modal-dialog',
            centered ? 'modal-dialog-centered' : null
        ].filter(item => item).join(' '));
        let modalContent = createElement('div', 'modal-content');

        // Modal heaing
        let modalHeader = createElement('div', 'modal-header');

        let heading = createElement('h5', 'modal-title');
        heading.innerText = title;

        let closeButton = createElement('button', 'btn-close', {
            'type': 'button',
            'data-bs-dismiss': 'modal',
            'aria-label': 'Close'
        });

        modalHeader.appendChild(heading);
        modalHeader.appendChild(closeButton);
        // End modal heading

        // Modal body
        let modalBody = createElement('div', 'modal-body');
        let paragraph = createElement('p', 'mb-0');

        if (asHtml) {
            paragraph.innerHTML = message;
        } else {
            paragraph.innerText = message;
        }

        modalBody.appendChild(paragraph);
        // End modal body

        // Modal footer
        let modalFooter = createElement('div', 'modal-footer');

        if (!hideCloseButton) {
            let closeButton2 = createElement('button', 'btn btn-' + closeType, {
                'type': 'button',
                'data-bs-dismiss': 'modal'
            });
            closeButton2.innerText = closeText;

            closeButton2.addEventListener('click', function (e) {
                onClose(e);
            });

            modalFooter.appendChild(closeButton2);
        }

        if (!hideConfirmButton) {
            let confirmButton = createElement('button', 'btn btn-' + confirmType, {
                'type': 'button'
            });
            confirmButton.innerText = confirmText;

            confirmButton.addEventListener('click', function (e) {
                onConfirm(e);
                myModal && myModal.hide();
            });

            modalFooter.appendChild(confirmButton);
        }
        // End modal footer

        modalContent.appendChild(modalHeader);
        modalContent.appendChild(modalBody);
        modalContent.appendChild(modalFooter);

        modalDialog.appendChild(modalContent);
        container.appendChild(modalDialog);

        myModal = new bootstrap.Modal(container, {
            backdrop: backdrop,
            keyboard: keyboard,
            focus: focus
        });
        myModal.show();

        container.addEventListener('hidden.bs.modal', function (event) {
            myModal.dispose();
            container.remove();
        });
    }

    function dynamic(url, options) {
        Fetch.post({
            url: url,
            method: 'POST',
            responseType: 'json',
            data: options.data || {},
            success: function (res) {
                showDynamicModal(res.message, options);
            },
            error: function (err) {

            }
        });
    }

    function showDynamicModal(modalDialog, options) {

        let myModal = null;

        let container = createElement('div', 'modal fade', {
            'tabindex': '-1',
            'aria-hidden': 'true'
        });

        container.innerHTML = modalDialog;

        myModal = new bootstrap.Modal(container, {
            backdrop: 'static',
            focus: true
        });

        myModal.show();

        container.addEventListener('hidden.bs.modal', function (event) {
            myModal.dispose();
            container.remove();
        });

        const close = function () {
            myModal.hide()
        };

        container.addEventListener('shown.bs.modal', function (event) {
            let form = container.querySelector('form');
            if (form) {
                let first = form.querySelector('input[autofocus],textarea[autofocus]');
                first && first.focus();
            }
            options.success && options.success(container, close);
        });
    }

    return {
        show: show,
        dynamic: dynamic
    };
}));