window.addEventListener('load', function () {
    window.dataLayer = window.dataLayer || [];
    let timestampStart = Date.now();
    let players = {};
    let watchTimes = {};

    function onYouTubePlayerLoad () {
        let frames = document.getElementsByTagName('iframe');
        // find all frames youtube embeds
        for (let i = 0; i < frames.length; ++i) {
            let matches = /^https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]+)(\?\S*)?$/.exec(frames[i].src);
            if (matches) {
                frames[i].id = matches[1];
                //frames[i].setAttribute('enablejsapi', 'true');
                let url = new URL(frames[i].src);
                url.searchParams.set('enablejsapi', '1')
                url.searchParams.set('origin', window.location.origin)
                frames[i].src = url.toString();
                watchTimes[matches[1]] = { time: 0, interval: null };
                players[matches[1]] = new YT.Player(matches[1], {
                    events: {
                        'onStateChange': function (event) {
                            let videoId = event.target.playerInfo.videoData.video_id;
                            if (event.data === YT.PlayerState.PLAYING){
                                if (!watchTimes[videoId]['interval']){
                                    watchTimes[videoId]['interval'] = setInterval(function (){
                                        watchTimes[videoId].time += 100;
                                    }, 100)
                                }
                            }else{
                                clearInterval(watchTimes[videoId]['interval']);
                                delete watchTimes[videoId]['interval']
                            }
                        }
                    }
                });
            }
        }
    }

    function msToTime(duration) {
        let milliseconds = Math.floor((duration % 1000) / 10),
            seconds = Math.floor((duration / 1000) % 60),
            minutes = Math.floor((duration / (1000 * 60)) % 60),
            hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;
        milliseconds = milliseconds < 10 ? '0' + milliseconds: milliseconds

        return hours + ":" + minutes + ":" + seconds + ":" + milliseconds;
    }

    if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
        // add youtube api if not yet
        let tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        let firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        window.onYouTubeIframeAPIReady = function () {
            onYouTubePlayerLoad();
        }
    } else {
        onYouTubePlayerLoad();
    }

    window.addEventListener('beforeunload', function (event) {
        let target = event.target;
        let isMailto = target.activeElement && target.activeElement.href && target.activeElement.href.indexOf('mailto:');
        let isTel = target.activeElement && target.activeElement.href && target.activeElement.href.indexOf('tel:');

        if (isMailto === 0 || isTel === 0) {
            return;
        }
        for (const [id,player] of Object.entries(players)) {
            if (watchTimes[id]['time'] > 0){
                dataLayer.push({
                    'event': 'embed_engagement',
                    'embed_id': `${player.playerInfo.videoData.video_id}`,
                    'embed_title': `${player.playerInfo.videoData.title}`,
                    'engagement_time': `${msToTime(watchTimes[id]['time'])}`,
                    'embed_source_platform': 'youtube',
                    'embed_type': 'video'
                })
            }
        }

        let timestampEnd = Date.now();
        dataLayer.push({
            'event': 'view_article',
            'timestamp_start': `${timestampStart}`,
            'timestamp_end': `${timestampEnd}`,
            'engagement_time': `${msToTime(timestampEnd - timestampStart)}`,
        })
    })


    let monitor = setInterval(function () {
        let elem = document.activeElement;
        if (elem && elem.tagName == "IFRAME") {
            if (elem.parentElement.classList.contains('twitter-tweet')) {
                document.activeElement.blur();
                dataLayer.push({
                    'event': 'embed_engagement',
                    'embed_id': `${elem.getAttribute('data-tweet-id')}`,
                    'embed_title': '',
                    'embed_source_platform': 'twitter',
                    'embed_type': 'post'
                })
            }

            if (elem.classList.contains('instagram-media')) {
                document.activeElement.blur();
                let matches = /^https:\/\/www\.instagram\.com\/p\/([a-zA-Z0-9_-]+)(\S*)?$/.exec(elem.src);
                if (matches) {
                    dataLayer.push({
                        'event': 'embed_engagement',
                        'embed_id': `${matches[1]}`,
                        'embed_title': '',
                        'embed_source_platform': 'instagram',
                        'embed_type': 'post'
                    })
                }

            }

            let matches = /^https:\/\/webplayer\.l7cdn\.com\/pla\/[a-zA-Z0-9_-]+\/([a-zA-Z0-9_-]+)(\S*)?$/.exec(elem.src);
            if (matches) {
                let title = elem.parentElement.nextElementSibling;
                document.activeElement.blur();
                dataLayer.push({
                    'event': 'embed_engagement',
                    'embed_id': `${matches[1]}`,
                    'embed_title': `${title.textContent}`,
                    'embed_source_platform': 'link7',
                    'embed_type': 'video'
                })
            }
        }

    }, 400)
})