/**
 * @type {HTMLIFrameElement | null}
 */
let KING_iframe
function FrameBuilder(title, url, initialHeight) {
    this.formId = 'custom_king_form';
    this.frameMinWidth = '100%';
    this.initialHeight = initialHeight;
    this.defaultHeight = '';
    this.src = url
    var htmlCode = '<iframe title="' + title.replace(/[\\"']/g, ' \\$&').replace(/&amp;/g, '&')
        + '" src="' + this.src + '" allowtransparency="true" allow="geolocation;" allowfullscreen="true" name="' + this.formId + '" id="' +
        this.formId + '" style="width: 10px; min-width:' + this.frameMinWidth
        + '; display: block; overflow: hidden; border: none;" height="2000" scrolling="no"' +
        this.defaultHeight + '></iframe>';
    //var newFrame = document.createElement("iframe")
    //newFrame.style.minWidth = this.frameMinWidth
    //newFrame.src = this.src
    //newFrame.id = this.formId
    //document.body.append(newFrame)
    //console.log("Current Script:", document.currentScript)
    document.currentScript.insertAdjacentHTML("afterend", htmlCode)
    //document.write(htmlCode);
    KING_iframe = document.getElementById(this.formId);
    //var doc = KING_iframe.contentDocument ? KING_iframe.contentDocument : (KING_iframe.contentWindow.document || KING_iframe.document);
    //doc.write(innerHTML)
}
FrameBuilder("Blabla", 'https://svform.kingtechnology.com/form/pool_trade_up_consumer', 1730);

//createModal('Title', 'some content for you that is semi-long and requires no reading', [{text: 'click', onclick:()=>{alert('hi')}, style:{}}])
function createModal(title, content, buttons, lock_page = false) {
    let overflow = lock_page ? 'hidden' : 'auto';

    let modal = document.createElement('div');
    Object.assign(modal.style, {
        position: 'fixed',
        left: '0',
        top: '0',
        width: '100%',
        height: '100%',
        overflow,
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        zIndex: '1000',
        display: 'block'
    });

    let modalDialog = document.createElement('div');
    Object.assign(modalDialog.style, {
        backgroundColor: '#FFFFFF',
        margin: '10% auto',
        borderRadius: '5px',
        boxShadow: '0 5px 15px rgba(0,0,0,.5)',
        maxWidth: '500px',
        width: '100%'
    });

    let modalContent = document.createElement('div');
    modalContent.style.padding = '15px';

    let modalHeader = document.createElement('div');
    Object.assign(modalHeader.style, {
        borderBottom: '1px solid #e5e5e5',
        padding: '15px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
    });

    let modalTitle = document.createElement('h4');
    modalTitle.innerText = title;
    modalTitle.style.marginTop = '0';
    modalTitle.style.marginBottom = '0';
    modalHeader.appendChild(modalTitle);

    if (!lock_page) {
        let closeButton = document.createElement('button');
        closeButton.innerText = '×';
        Object.assign(closeButton.style, {
            fontSize: '1.5em',
            lineHeight: '1',
            color: '#000',
            background: 'transparent',
            border: 'none',
            opacity: '0.5'
        });
        closeButton.onclick = function () {
            modal.style.display = 'none';
            document.body.style.overflow = overflow;
        };
        modalHeader.appendChild(closeButton);
    }

    modalContent.appendChild(modalHeader);

    let modalBody = document.createElement('div');
    modalBody.innerHTML = content;
    modalBody.style.padding = '15px';
    modalContent.appendChild(modalBody);

    let modalFooter = document.createElement('div');
    modalFooter.style.padding = '15px';
    modalFooter.style.textAlign = 'right';
    modalFooter.style.borderTop = '1px solid #e5e5e5';
    buttons.forEach(buttonDef => {
        let btn = document.createElement('button');
        btn.innerText = buttonDef.text;
        Object.assign(btn.style, {
            padding: '6px 12px',
            margin: '0 5px',
            backgroundColor: '#007bff',
            color: 'white',
            border: '1px solid #007bff',
            borderRadius: '4px',
            cursor: 'pointer'
        });
        if (buttonDef.redirect !== undefined) {
            btn.onclick = () => {
                location.href = buttonDef.redirect
            }
        }
        else if (buttonDef.action === 'close') {
            btn.onclick = () => {
                modal.remove()
            }
        }
        modalFooter.appendChild(btn);
    });
    modalContent.appendChild(modalFooter);

    modalDialog.appendChild(modalContent);
    modal.appendChild(modalDialog);
    document.body.appendChild(modal);
    document.body.style.overflow = overflow;

    // Optional: Close modal when clicking outside of it
    if (!lock_page) {
        modal.onclick = function (event) {
            if (event.target === modal) {
                alert("Removing modal")
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        };
    }

    return modal;
}

//let KING_before = []
//let KING_after = []
function updateFrameHeight() {
    var frameHeight = KING_iframe.contentDocument.body.offsetHeight
    if (KING_iframe.height != frameHeight) {
        KING_iframe.height = frameHeight;
    }
    //setTimeout(updateFrameHeight, 100);
}
let lastHeight = 0;
window.addEventListener("DOMContentLoaded", function () {
    //KING_iframe = document.getElementById("custom_king_form")
    //setTimeout(updateFrameHeight, 500)
    //console.log("got iframe:", KING_iframe)
    //uncomment the following line to enable sending data to the form
    iframe_window = KING_iframe.contentWindow

    //Calculate heights
    //let before = true
    //for(let section of document.getElementsByTagName('section')){
    //  if(section.querySelector('#custom_king_form') != null){
    //    before = false
    //    continue
    //  }
    //  if(before){
    //    KING_before.push(section)
    //  }
    //  else{
    //    KING_after.push(section)
    //  }
    //}

    window.addEventListener("message", function (e) {
        //TODO: verify message origin
        if (e.origin !== 'https://svform.kingtechnology.com') {
            return;
        }
        //console.log(e)
        if (e.data == 'recaptcha-setup') {
            return
        }
        if ("connect" in e.data) {
            iframe_window.postMessage({ "connect": e.data.connect }, KING_iframe.src)
        }
        if ("myHeight" in e.data) {
            if (e.data.myHeight != lastHeight) {
                console.log("Height changed, new height:", e.data.myHeight)
                lastHeight = e.data.myHeight
                KING_iframe.height = e.data.myHeight;
            }
        }
        if ("showModal" in e.data) {
            console.log("Showing modal", e.data.showModal)
            let modalEl = createModal(e.data.showModal.title, e.data.showModal.content, e.data.showModal.buttons, e.data.showModal.lock_page)
        }
        if ("getScroll" in e.data) {
            let formTop = -KING_iframe.getBoundingClientRect().y
            let header = document.getElementById('header').offsetHeight
            let top = formTop + header;
            if (top < 0) {
                top = 0;
            }
            iframe_window.postMessage({ "scroll": top, "data": e.data.getScroll }, KING_iframe.src)
        }
        if ("newTab" in e.data) {
            window.open(e.data.newTab, '_blank')
        }
        if ("redirect" in e.data) {
            location.href = e.data.redirect
        }
        if ("replace" in e.data) {
            location.replace(e.data.replace)
        }
        if ("getParams" in e.data) {
            const url = new URL(window.location.toLocaleString());
            let params = {}
            for (let [k, v] of url.searchParams.entries()) { params[k] = v }
            iframe_window.postMessage({ "params": params }, KING_iframe.src)
        }

        //Uncomment next line for debugging
        //console.log("Outside", e.data)

        //To send a message to the form:
        //iframe_window.postMessage("Test", iframe.src)
    })
}, false)