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

const $background = $('.modal-bg');
let close = x => x;
let on_resize = x => x;
$(window).on('resize', on_resize);

module.exports = {
    close: function() {
        close();
    },
    create: function(id) {
        const $modalWrapper = $(`#${id}`);
        const $modal = $modalWrapper.find('.modal');
        const $modalContent = $modal.find('.modal-content');

        $modalContent.find('.field-header').css('padding-top', 0);

        close = function() {
            $background.fadeTo(250, 0, 'swing', function() {
                $background.removeClass('visible');
            });
            $modalWrapper.fadeTo(250, 0, 'swing', function() {
                $modalWrapper.removeClass('visible');
            });
            noScroll.off();
            close = x => x;
        };

        let $close = $modal.find('.modal-close')
        if (!$close.length) {
            $close = $('<span>', {
                class: 'modal-close',
                text: '✖'
            }).on('click', function() {
                close();
            });
            $modal.prepend($close);
        }

        on_resize = function() {
            $modalContent.css("height", "unset");
            $modalContent.css("height", $modal.innerHeight());
            $close.css('margin-left', $modal.width() - 20);
        };

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

        $modalWrapper.addClass('visible').fadeTo(250, 1, 'swing');
        $background.addClass('visible').fadeTo(250, 0.5, 'swing').off('click').on('click', function() {
            close();
        });
        noScroll.on();

        return $modalContent;
    }
}