import '../../../scss/elements/modal.scss';

const modal = {
    title: '',
    header: '',
    content: '',
    footer: '',
    errors: '',
    markup: `<div id="cembrapay-modal" class="cembrapay-modal">
            <div id="bg"></div>
            <div class="cembrapay-modal-content">
                <span id="close" class="close">&times;</span>
                <div id="header"></div>
                <h2 id="title"></h2>
                <div id="content"></div>
                <div id="footer"></div>
                <div id="errors"></div>
            </div>
        </div>`,
    init: () => {

        if( ! jQuery('#cembrapay-modal').length ) {
            jQuery('body').append(modal.markup);
        }
        
        modal.title   = jQuery('#cembrapay-modal .cembrapay-modal-content #title');
        modal.header  = jQuery('#cembrapay-modal .cembrapay-modal-content #header');
        modal.content = jQuery('#cembrapay-modal .cembrapay-modal-content #content');
        modal.footer  = jQuery('#cembrapay-modal .cembrapay-modal-content #footer');
        modal.errors  = jQuery('#cembrapay-modal .cembrapay-modal-content #errors');

    },
    open: field => {
        jQuery('#cembrapay-modal').css('display', 'flex');
    },

    close: () => {
        modal.header.html('');
        modal.content.html('');
        modal.footer.html('');
        modal.errors.html('');
        jQuery('#cembrapay-modal .cembrapay-modal-content').css('max-width', '50%');
        jQuery('#cembrapay-modal').css('display', 'none');
    }
}

export default modal;