const pt = document.getElementById('eventIframe').parentElement;
document.getElementById('event-iframe-section').style.minHeight = '1px';
document.getElementById('eventIframe').style.minHeight = '1px';
document.getElementById('eventIframe').style.overflow = 'hidden';
document.getElementById('eventIframe').parentElement.style.overflow = 'hidden';
var qH = 0;

window.addEventListener("message", (event) => {
    
    if (event.origin !== 'https://media.rampard.net') {
        return;
    }
    if (event.data.startsWith('setHeightAll')){
        const heightAll = event.data.substring(12);
        pt.style.height = heightAll + 'px';
        console.log('set height all:' + heightAll);
    } else if(event.data.startsWith('setHeight')){
        qH = event.data.substring(9);
        console.log('received qH:' + qH);
    } else if(! event.data.includes('nuanria_messaging')){
            pt.innerHTML = event.data;
            evJSFromHtml(event.data);
            requestAnimationFrame(() => {
                console.log('requestAnimationFrame');
                setHeight(); // Call setHeight after DOM update
                window.dispatchEvent(new Event('resize')); // Trigger resize for consistency
            });
    } 
    console.log('-setHeight->');
    setHeight();
});

window.addEventListener("resize", (event) => {
    setHeight();
});

function setHeight(){
    
    requestAnimationFrame(() => {
        let heightToSet = 0;
        if (document.getElementById('playerWrapperDiv')) {
            const playerH = document.getElementById('playerWrapperDiv')?.clientWidth * 0.5625 || 0;
            console.log('playerWrapper height:' + playerH);
            document.getElementById('playerWrapperDiv').children[0].style.height = playerH + 'px';
            document.getElementById('playerWrapper').getElementsByTagName('iframe')[0].height = playerH;
            heightToSet = parseInt(playerH) + parseInt(document.getElementById('headerTextDiv')?.clientHeight || 0) + parseInt(qH);
            setIframeHeight(heightToSet);
            setQa(qH);
        } else if (document.getElementById('playerWrapper')) {
            const playerH = document.getElementById('playerWrapper')?.clientWidth * 0.5625 || 0;
            console.log('playerWrapper height:' + playerH);
            document.getElementById('playerWrapper').children[0].style.height = playerH + 'px';
            const headerHeight = document.getElementById('headerWrapper')?.clientHeight || 0;
            const subheaderHeight = document.getElementById('subheaderWrapper')?.clientHeight || 0;
            console.log('header Height:' + headerHeight);
            console.log('subheaderHeight Height:' + subheaderHeight);
            console.log('qH :' + qH);
            heightToSet = parseInt(playerH) + parseInt(headerHeight) + parseInt(subheaderHeight) + parseInt(qH) + 5;
            console.log('total:' + heightToSet);
            setIframeHeight(heightToSet);
            setQa(qH);
        }
        // Retry if height is too low
        if (!heightToSet) {
            setTimeout(setHeight, 1000);
        }
        
    });
}

function setIframeHeight (len){
    console.log('setting height:' + len);
    pt.style.height = len + 'px';
    console.log('pt hight:' + pt.style.height);
}

function setQa(len){
    var qaElem =  document.getElementById('qa');
    if (typeof(qaElem) != 'undefined' && qaElem != null){
        document.getElementById('qa').style.height = len + 'px';
        document.getElementById('qa').style.minHeight = len + 'px';
    }
}

function evJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; ++i) {
    var script = scripts[i];
    var startSrv = script.innerHTML.indexOf('srv="');
    var endSrv = script.innerHTML.indexOf('";', startSrv);
    var tempSrv = script.innerHTML.substring(startSrv + 'srv="'.length, endSrv);
    
    var startMpath = script.innerHTML.indexOf("mpath = '");
    var endMpath = script.innerHTML.indexOf("';", startMpath);
    var tempMpath = script.innerHTML.substring(startMpath + "mpath = '".length, endMpath);
    
    var startMque = script.innerHTML.indexOf("mque = '");
    var endMque = script.innerHTML.indexOf("';", startMque);
    var tempMque = script.innerHTML.substring(startMque + "mque = '".length, endMque);
   
    if(tempSrv && tempMpath && tempMque){
        srv = tempSrv;
        mpath = tempMpath;
        mque = tempMque;
    }
  }
}

//
var srv, mpath, mque;
var unloadCalled = false;
function unloadSendBeacon(statusCode) {
    mque += '&statusCode=' + statusCode;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        request.open("GET", srv + mpath + mque, true);
        request.send(null);
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
        if (request) {
            request.open("GET", srv + mpath + mque, true);
            request.send();
        }
    }
}
window.addEventListener('visibilitychange', function (e) { // For >=IE7, Chrome, Firefox
    if (!unloadCalled) {
        if (document.visibilityState === 'hidden') {
            (navigator.sendBeacon) ? navigator.sendBeacon(srv + mpath + mque + '&statusCode=41') : unloadSendBeacon(41);
        } else {
            (navigator.sendBeacon) ? navigator.sendBeacon(srv + mpath + mque + '&statusCode=33') : unloadSendBeacon(33);
        }
    }
});
window.addEventListener('beforeunload', function (e) {
    unloadCalled = true;
    (navigator.sendBeacon) ? navigator.sendBeacon(srv + mpath + mque + '&statusCode=40') : unloadSendBeacon(40);
});






document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded - about to call setHeight');
    requestAnimationFrame(() => {
        setHeight();
        // Trigger resize to ensure correct height calculation
        window.dispatchEvent(new Event('resize'));
    });
});