const MSP_URL = 'https://mda.weup.dev';
// const MSP_URL = 'http://localhost:9101';
const MSP_API_URL = `${MSP_URL}/v1`;
let MSP_CONTENT_KEYWORDS = []; // Lưu danh sách từ khóa trong bài viết
let startTimeMap = {}; // Lưu thời gian hiển thị
document.addEventListener("DOMContentLoaded", async function () {
    (async function MSP_checkSite() {
        if (window.matchMedia("(min-width: 1025px)").matches) {
            console.log('== Mda not working on PC ==');
            document.querySelectorAll('.mda-zone').forEach(e => { e.remove(); });
            return;
        }
        if (window.matchMedia("(min-width: 769px) and (max-width: 1024px)").matches) {
            console.log('== Mda not working on Tablet ==');
            document.querySelectorAll('.mda-zone').forEach(e => { e.remove(); });
            return;
        }
        console.log('== Mda on Mobile ==');
        // Kiểm tra site có đc cấu hình QC không
        await MSP_callApi(url = `${MSP_API_URL}/mda/check-site`).then(res => {
            const positions = res.data?.positions;
            const positionCode = positions ? positions.map(x => x['code']) : [];
            document.querySelectorAll('.mda-zone').forEach(e => {
                if (!positionCode.includes(e.getAttribute('data-position'))) {
                    console.log(`Mda - remove because position "${e.getAttribute('data-position')}" is invalid`);
                    e.remove();
                }
            });
        });
        if (!document.querySelectorAll('.mda-zone').length) return;
        // Lấy danh sách từ khóa
        MSP_CONTENT_KEYWORDS = MSP_getKeywordDensity();
        localStorage.setItem('MSP_CONTENT_KEYWORDS', MSP_CONTENT_KEYWORDS);
        // Render
        MSP_render();
        window.addEventListener('scroll', MSP_render);
        // Tính thời gian hiển thị
        // window.addEventListener("scroll", MSP_checkDivVisibility);
        // window.addEventListener("resize", MSP_checkDivVisibility);
        // window.addEventListener("load", MSP_checkDivVisibility);
    })()
});

/**
 * Hàm kiểm tra xem element có hiển thị trên màn hình không
 */
function MSP_checkDivVisibility() {
    var divs = document.querySelectorAll('.mda-zone.loaded');
    var windowHeight = window.innerHeight || document.documentElement.clientHeight;

    divs.forEach(function (div) {
        var rect = div.getBoundingClientRect();
        var divCode = div.getAttribute('data-position');

        if (rect.top >= 0 && rect.bottom <= windowHeight) {
            // Div hiển thị trên màn hình
            if (!startTimeMap[divCode]) {
                startTimeMap[divCode] = performance.now();
                console.log(`Thời gian bắt đầu xuất hiện của div ${divCode}: ${startTimeMap[divCode]}`);
            }
            return;
        }
        // Div không hiển thị trên màn hình
        if (startTimeMap[divCode]) {
            var endTime = performance.now();
            var timeOnScreen = endTime - startTimeMap[divCode];
            console.log(`Thời gian hiển thị của div ${divCode}: ${timeOnScreen} milliseconds`);
            delete startTimeMap[divCode];
        }
    });
}


/**
 * Hàm render mda
 * @returns 
 */
async function MSP_render() {
    const mdaZones = document.querySelectorAll('.mda-zone[data-loaded="0"]');
    if (!mdaZones.length) {
        window.removeEventListener('scroll', MSP_render);
        return;
    }
    // Lấy danh sách vị trí cần render
    mdaZones.forEach(function (zone) {
        if (!MSP_isElementInViewport(zone) || zone.getAttribute('data-loaded') == '1') return;
        if (!zone.getAttribute('data-position')) zone.remove();
        const p = zone.getAttribute('data-position');
        const payload = {
            'p': p,
            'text_seo': `${document.title}. ${MSP_getMeta('description')}`,
            'keywords': MSP_CONTENT_KEYWORDS,
            'parent_url': window.location.origin + window.location.pathname
        }
        const url = MSP_genUrl(`${MSP_URL}/mda`, payload);
        zone.innerHTML = `<iframe class="mda-iframe" src="${url}" width="100%" height="0" style="border: 0; overflow: hidden; margin: 0 auto; display: block;" scrolling="no"></iframe>`;
        zone.setAttribute('data-loaded', 1); // Set luôn loaded = 1 tránh TH load lại nhiều lần
        zone.classList.add('loaded');
        // Điều chỉnh height iframe
        const iframe = zone.querySelector('iframe');
        window.addEventListener('message', function (event) {
            if (!['resize', 'remove'].includes(event.data.type) || event.source !== iframe.contentWindow) return;
            if ('remove' == event.data.type) {
                console.log(event.data.message || `Mda - ${p} - Remove by click`);
                zone.remove();
                return;
            }
            // Nếu không phải remove, thì kiểm tra height
            if (event.data.height == 0 || event.data.width == 0) {
                console.log(`Mda - ${p} - Remove because no-content`);
                zone.remove();
                return;
            }
            iframe.style.height = `${event.data.height}px`;
            iframe.style.width = `${event.data.width}px`;
            // iframe.style.marginBottom = `10px`;
        });
    });
}


/**
 * Tạo url từ 1 string và object
 * @param {string} url 
 * @param {Object} params 
 * @returns {string}
 */
function MSP_genUrl(url, params = {}) {
    if (!Object.keys(params).length) return url;
    queryString = MSP_objToQueryString(params);
    if (queryString) url += '?' + queryString;
    return url
}

/**
 * Hàm chuyển đổi đối tượng params thành query string
 * @param {Object} params 
 * @returns {string}
 */
function MSP_objToQueryString(params) {
    if (!Object.keys(params).length) return '';
    return Object.keys(params)
        .map(key => {
            if (Array.isArray(params[key])) {
                return params[key].map(value => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');
            }
            return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
        })
        .join('&');
}


/**
 * Hàm kiểm tra xem một phần tử có đang hiển thị trong màn hình không?
 * @param {element} el 
 * @returns {Boolean}
 */
function MSP_isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

/**
 * Lấy danh sách các tham số từ URL js
 * @param {string} url 
 * @returns {Object}
 */
function MSP_getQueryParams(url) {
    if (!url) url = window.location.href;
    const queryString = url.split('?')[1];
    if (!queryString) return {};
    let queryParams = {};
    const params = queryString.split('&');
    for (let i = 0; i < params.length; i++) {
        let param = params[i].split('=');
        let paramName = decodeURIComponent(param[0]);
        let paramValue = decodeURIComponent(param[1]);
        queryParams[paramName] = paramValue;
    }
    return queryParams;
}

/**
 * Lấy giá trị thẻ meta có name = t
 * @param {string} t 
 * @returns {string}
 */
function MSP_getMeta(t) {
    let e = document.getElementsByTagName('meta');
    for (let n = 0; n < e.length; n++) {
        if (e[n].getAttribute("name") === t) return e[n].getAttribute('content');
    }
    return ""
}
/**
 * Get Attributes
 * @param {*} element 
 * @param {Array} keys 
 * @returns {Object}
 */
function MSP_getAttributes(element, keys = []) {
    var attributes = {};
    Array.from(element.attributes).forEach(attr => {
        if (keys.length && !keys.includes(attr.name)) return;
        attributes[attr.name] = attr.value;
    });
    return attributes;
}

/**
 * Call API
 * @param {string} url 
 * @param {object} payload 
 * @param {string} method 
 * @returns {Promise}
 */
function MSP_callApi(url, payload = {}, method = 'GET') {
    return new Promise((resolve, reject) => {
        if (method.toLowerCase() == 'get') {
            url = MSP_genUrl(url, payload)
        }
        const xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        xhr.onload = function () {
            resolve(JSON.parse(xhr.responseText));
        };
        xhr.onerror = function () {
            console.log('=========== Error: ', xhr.statusText);
            reject(new Error(xhr.statusText));
        };
        xhr.send(method.toLocaleLowerCase() == 'post' ? JSON.stringify(payload) : null);
    });
}


/**
 * Lấy danh sách từ khóa xuất hiện nhiềU
 * @param {number} dens - số lần xuất hiện tối thiểu
 * @param {number} limit - số lượng từ cần lấy
 * @returns {Array}
 */
function MSP_getKeywordDensity(dens = 10, limit = 40) {
    let elements = document.querySelectorAll('.entry, .entry-content');
    if (!elements.length) {
        elements = document.querySelectorAll('body');
    }
    let keywordDensity = {};
    // Duyệt qua từng phần tử và lấy textContent của chúng
    elements.forEach(function (element) {
        // Tách các từ trong textContent thành mảng
        const words = element.textContent.split(/\s+/);
        // Duyệt qua từng độ dài của cụm từ
        for (let n = 2; n <= 5; n++) {
            // Duyệt qua mảng từ để tạo các cụm từ
            for (let i = 0; i < words.length - n + 1; i++) {
                const w = words.slice(i, i + n).join(' ').replaceAll(',', '').replaceAll('.', '').replaceAll('?', '');
                if (!w.length) continue;
                // Kiểm tra xem cụm từ đã tồn tại trong danh sách và có lớn hơn hoặc bằng 2 lần xuất hiện hay không
                if (!(w in keywordDensity)) {
                    keywordDensity[w] = 1;
                }
                keywordDensity[w]++;
            }
        }
    });

    // Lọc các cụm từ có số lần xuất hiện từ dens trở lên
    let thickKeywordDensity = {};
    for (let w in keywordDensity) {
        if (keywordDensity[w] >= dens) {
            thickKeywordDensity[w] = keywordDensity[w];
        }
    }
    const listKeyWords = Object.keys(thickKeywordDensity);
    if (!limit || limit >= listKeyWords.length) return listKeyWords;

    // Sắp xếp các cụm từ theo số lần xuất hiện từ cao đến thấp
    const sortedKeywordDensity = listKeyWords.sort(function (a, b) {
        return thickKeywordDensity[b] - thickKeywordDensity[a];
    });
    return sortedKeywordDensity.slice(0, limit);
}

/**
 * Tìm parent chứa các class trong classNames
 * @param {element} element 
 * @param {Array} classNames 
 * @returns {element}
 */
function MSP_findAncestorWithClasses(element, classNames) {
    var ancestor = element.parentElement;
    while (ancestor) {
        var hasAllClasses = classNames.every(className => ancestor.classList.contains(className));
        if (hasAllClasses) {
            return ancestor;
        }
        ancestor = ancestor.parentElement;
    }
    return null;
}