require('../../scss/modal.scss');
const $ = require('jquery');
const noScroll = require('no-scroll');

module.exports = function(content) {
    let onclose = function() {};
    let modalExports = {
        close: function() {
            $background.remove();
            $modalWrapper.remove();
            noScroll.off();
            onclose();
        },
        onclose: function(callback) {
            onclose = callback;
        }
    }

    const onResize = function() {
        $modalContent.css("height", "unset");
        $modalContent.css("height", $modal.innerHeight());
    }

    let $modal;
    let $modalContent;
    let $background = $(`<div class="modal-bg"></div>`);
    let $modalWrapper = $(
        `<div class="modal-wrapper"></div>`
    ).append(
        $modal = $(`<div class="modal"></div>`).append(
            $modalContent = $(`<div class="modal-content"></div>`).html(content)
        )
    );

    $(document.body).append($background).append($modalWrapper);
    $(window).on("resize", onResize);

    // Theres some sort of race condition that makes the modal
    // smaller than it should be, probably while assets load.
    setTimeout(onResize, 100);

    $background.fadeTo(250, 0.5);
    $modalWrapper.fadeTo(250, 1);
    noScroll.on();

    return modalExports;
}