/*
 *  iDonate Pop-Up Modal Utility Script
 */

/*
    PARAMETERS
*/

const parameters = {
    uuid: "6d048042-96df-46bf-9bc7-8ae269514e45", //uuid of giving form
    color: "#0000ff", //color of give now button
    targetElement: 'your-target-element-id', //the ID of the div you want to add the Give Now button to
}
const isDevEnvironment = false; //false for prod.  true for dev.

/*
    MEMORY ALLOCATION: CACHE
*/

var formUuid = null; //allocate memory for caching form UUID

/**
    RUNTIME
 */

document.addEventListener('DOMContentLoaded', () => {
    buildModal(parameters);
});

/*
    FUNCTIONS
 */

//build and display the demo page based on input
function buildModal(params) {
    //set globals
    formUuid = params.uuid;

    //build give now button
    var gnb = document.createElement('div');
    gnb.id = "give-now-button";
    gnb.style.backgroundColor = params.color;
    gnb.innerHTML = 'Give Now';

    //add give now button to page
    document.getElementById(parameters.targetElement).appendChild(gnb);
    //document.body.appendChild(gnb);
    //add give now button listener
    document.getElementById('give-now-button').addEventListener('click', () => {
        popUpTheForm(formUuid);
    });
}

//build and display the pop-up modal.
function popUpTheForm(formID) {
    //container div
    var c = document.createElement('div');
    c.classList.add('iframe-container', 'modal-inactive');
    c.id = "top-level-container";

    //iframe div
    var d = document.createElement('div');
    d.id = "inner-container"
    d.classList.add('giving-form');

    //x-out button
    var x = document.createElement('div');
    x.innerHTML = 'X';
    x.id = "x-interface";

    //build iframe element
    if (isDevEnvironment == true) {
        //form url is on apps.dev-idonate.com
        d.innerHTML = '<iframe src="https://apps.dev-idonate.com/giving-form/' +
            formID +
            '" width="100%" height="100%" id="gf-iframe">';
    } else if (isDevEnvironment == false) {
        //form url is on apps.idonate.com
        d.innerHTML = '<iframe src="https://apps.idonate.com/giving-form/' +
            formID +
            '" width="100%" height="100%"" id="gf-iframe">';
    } else {
        //error handling
        console.log('unexpected value for dev environment boolean');
        return null;
    }

    //add x-out and giving form elements to container div
    c.appendChild(x);

    //delay load to allow for entrance animation
    window.setTimeout(() => {
        c.appendChild(d);
    }, 350);

    //add newly built container div to existing page and set modal status to active
    document.body.appendChild(c);
    window.setTimeout(() => {
        c.classList.replace('modal-inactive', 'modal-active');
    }, 20);

    //set x-out listener
    document.getElementById('x-interface').addEventListener('click', function () {
        closeModal();
    });
}

//close the pop-up modal.
function closeModal() {
    document.getElementById('top-level-container').classList.replace('modal-active', 'modal-inactive');
    window.setTimeout(() => {
        document.getElementById('top-level-container').remove();
    }, 501); //animation should be .5s or 500ms.
}