var assetsUrlBase = "https://admin.signafrica.com/";
// Function to parse query parameters from the script tag URL
function getQueryParam(elementName, bannerId) {
    // Get param that passed in script
    const scriptSrc = document.currentScript.src;
    const queryString = scriptSrc.split('?')[1];
    // Check param is passed or not
    if (!queryString) {
        return null;
    }else { // Parse params
        const urlParams = new URLSearchParams(queryString),
            element =  urlParams.get(elementName),
            banner = urlParams.get(bannerId);

        if ( element && banner ) {
            return {
                "element": element,
                "banner": banner
            }
        } else {
            return null;
        }
    }
}

// Function to check if Bootstrap CSS is used
function isBootstrapCSSUsed() {
    // Check for Bootstrap CSS classes
    const elementsWithBootstrapClasses = document.querySelectorAll('.container, .btn');
    const hasBootstrapCSSClasses = elementsWithBootstrapClasses.length > 0;

    // Check for Bootstrap CSS via link element
    const linkElements = document.querySelectorAll('link[rel="stylesheet"][href*="bootstrap"]');
    const hasBootstrapCSSLinked = linkElements.length > 0;

    return hasBootstrapCSSClasses || hasBootstrapCSSLinked;
}

// Function to check if Bootstrap JavaScript is used
function isBootstrapJSUsed() {
    // Check for Bootstrap JavaScript classes
    const elementsWithBootstrapJSClasses = document.querySelectorAll('.modal, .carousel');
    const hasBootstrapJSClasses = elementsWithBootstrapJSClasses.length > 0;

    // Check for Bootstrap JavaScript via script element
    const scriptElements = document.querySelectorAll('script[src*="bootstrap"]');
    const hasBootstrapJSLinked = scriptElements.length > 0;

    return hasBootstrapJSClasses || hasBootstrapJSLinked;
}

// external-slider-script.js
(function () { // iif to exicute automatically when page is render
    console.log("Calling the script-----");
    // Get and log the values of the extra parameters
    const queryData = getQueryParam('elementid','bid');
    console.log("queryData--", queryData);
    if (queryData) { // Check element is exist or not
        // Fetch slider content from the server
        fetch(`${assetsUrlBase}slider-images/${queryData.banner}`).then(response => response.json()).then(data => {
            // Get given elment to add data
            const sliderContainer = document.getElementById(queryData.element);
            if (sliderContainer) {
                // Append jQuery if not used in website
                if (typeof jQuery == 'undefined' || typeof $ == 'undefined') {
                    // Add jQuery cdn
                    var jqueryScriptEle = document.createElement("script");
                        jqueryScriptEle.setAttribute("src", "https://code.jquery.com/jquery.min.js");
                        // jqueryScriptEle.setAttribute("integrity", "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN");
                        jqueryScriptEle.setAttribute("crossorigin", "anonymous");
                        document.head.prepend(jqueryScriptEle);
                }
                // Append Bootstrap JS if not used in website
                if (!isBootstrapJSUsed() || !isBootstrapCSSUsed()) {
                    let bootstrapScriptEle = document.createElement("script");
                    bootstrapScriptEle.setAttribute("src", "https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js");
                    // bootstrapScriptEle.setAttribute("integrity", "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl");
                    bootstrapScriptEle.setAttribute("crossorigin", "anonymous");
                    document.head.appendChild(bootstrapScriptEle);
                    // Append Bootstrap popper JS if not used in website
                    // let bootstrapPopperScript = document.createElement("script");
                    // bootstrapPopperScript.setAttribute("src", "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js");
                    // bootstrapPopperScript.setAttribute("integrity", "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q");
                    // bootstrapPopperScript.setAttribute("crossorigin", "anonymous");
                    // document.head.appendChild(bootstrapPopperScript);
                    // Append Bootstrap CSS if not used in website
                    const bootstrapLink = document.createElement('link');
                    bootstrapLink.rel = 'stylesheet';
                    bootstrapLink.href = 'https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css';
                    // bootstrapLink.integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm";
                    bootstrapLink.crossorigin = "anonymous";
                    document.head.appendChild(bootstrapLink);
                }
                
                // Import custom CSS file
                let customCssLink = document.createElement('link');
                    customCssLink.rel = 'stylesheet';
                    customCssLink.href = `${assetsUrlBase}export/styles.css`; 
                    document.head.appendChild(customCssLink);

                // Import custom js file
                let customJsLink = document.createElement("script");
                    customJsLink.setAttribute("src", `${assetsUrlBase}custom-js`);
                    document.head.appendChild(customJsLink);

                // Add container div
                const containerDiv = document.createElement('div');
                containerDiv.id = 'slider-container';
                sliderContainer.appendChild(containerDiv);

                // Add slider div
                const sliderDiv = document.createElement('div');
                sliderDiv.id = 'image-slider';
                containerDiv.appendChild(sliderDiv);
                const images = data.images,
                    effect = data.banner.transition_effect,
                    timing = data.banner.transition_time * 1000;
                let effectClass = '', rippleClass = '';
                
                if (effect == "Fade") {
                    effectClass = "carousel-fade";
                }
                if (effect == "Ripple") {
                    rippleClass = "ripple-img";
                }

                let imgDivHTML = "";
                images.forEach(idata => {
                    if (imgDivHTML == "") {
                        imgDivHTML = `${imgDivHTML} <div class="item active">
                            <a href="${idata.image_url}" target="blank">    
                                <img class="d-block max-width ${rippleClass}" src="${idata.bimage}" onclick="countMe('${queryData.banner}');" alt="Banner">
                            </a>
                        </div>`;
                    }else {
                        imgDivHTML = `${imgDivHTML} <div class="item">
                            <a href="${idata.image_url}" target="blank">    
                                <img class="d-block max-width ${rippleClass}" src="${idata.bimage}" onclick="countMe('${queryData.banner}');" alt="Banner">
                            </a>
                        </div>`;
                    }
                });

                const crosalDivHTML = `<div id="carouselExampleSlidesOnly" class="carousel slide ${effectClass}" data-ride="carousel" data-interval="${timing}">
                    <div class="carousel-inner">
                        ${imgDivHTML}
                    </div>
                </div>`;

                sliderDiv.innerHTML = crosalDivHTML;

                // Import script js file
                let scriptJsLink = document.createElement("script");
                    scriptJsLink.setAttribute("src", `${assetsUrlBase}script-js`);
                    document.body.appendChild(scriptJsLink);

                fetch(`${assetsUrlBase}count-views/${queryData.banner}/1`).then(response => response.json()).then(data => {
                }).catch(error => console.error('Error to count views:', error));
            } else{
                console.error("Given element is not found!");
                return false;
            }
        }).catch(error => console.error('Error to fetching script:', error));
    }else {
        console.error("Required parameters not found!");
        return false;
    }
})();