// ---------------------------------------------
// cookie handling
// ---------------------------------------------
function boostiumSetCookie(cname, value, days) {
    const d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    let expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + value + ";" + expires + ";path=/";
}

function boostiumDeleteCookie(cname) {
    document.cookie = cname + "=;" + "expires=Thu, 01 Jan 1970 00:00:00 UTC" + ";path=/";
}

function boostiumGetCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return false;
}

// ---------------------------------------------
// onscroll scripts
// ---------------------------------------------

/*****************
* navbar
*****************/

// navbar color
const navbarToggler = document.getElementById('navToggleBtn');
const navbar = document.getElementById('navbar');
const tocFloatButton = document.getElementById('toc_dropdown_btn');

const navbarColor = element => {
    let y = window.scrollY
    if ( y < 40 && navbarToggler === null) {
        element.classList.remove('navbar-onscroll');
    } else if (y < 40 && navbarToggler.ariaExpanded === 'false' && navbar !== null && navbar.querySelector(".dropdown-toggle.show") == null) {
        element.classList.remove('navbar-onscroll');
    } else {
        element.classList.add('navbar-onscroll');
    }
}

// check that both navbarToggler and navbar exist
if ( navbar !== null ) {

    navbar.addEventListener("mouseover", function () {
        navbar.classList.add('navbar-onscroll');
    });

    navbar.addEventListener("mouseout", function () {
        let y = window.scrollY
        if (y < 40 && navbarToggler === null && navbar.querySelector(".dropdown-toggle.show") == null) {
            navbar.classList.remove('navbar-onscroll')
        } else if (y < 40 && navbarToggler.ariaExpanded === 'false' && navbar.querySelector(".dropdown-toggle.show") == null) {
            navbar.classList.remove('navbar-onscroll')
        }
    });

    // on hamburger toggle
    if ( navbarToggler !== null ) {
        navbarToggler.onclick = function() {
            if (!navbar.classList.contains('navbar-onscroll') ) {
                navbar.classList.add('navbar-onscroll')
            } else if (window.scrollY < 40 && navbarToggler.ariaExpanded === 'false') {
                navbar.classList.remove('navbar-onscroll')
            };
        };
    }

}


/*****************
* TOC sticky top visibility
*****************/

if ( tocFloatButton !== null ) {
    const tocFloatVisibility = element => {
        let y = window.scrollY
        if ( y < 40 ) {
            element.classList.add('faded');
        } else {
            element.classList.remove('faded');
        }
    }
    window.addEventListener("scroll", function () {
        tocFloatVisibility(tocFloatButton);
    });
}

/*****************
* back to top
*****************/

let btnBackToTop = document.getElementById("backToTop");

// When the user clicks on the button, scroll to the top of the document
function backToTop() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

function backToTopScroll() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        btnBackToTop.style.display = "block";
    } else {
        btnBackToTop.style.display = "none";
    }
}

/*****************
* sticky review
*****************/

let reviewSticky = document.getElementById("review-sticky");
let mainOffer = document.getElementById("main-offer-container");

function reviewStickyShow() {
    if (mainOffer.getBoundingClientRect().top < (mainOffer.getBoundingClientRect().height * -1 + 80) ) {
        reviewSticky.style.display = "inline";
    } else {
        reviewSticky.style.display = "none";
    }
}

/*****************
* onscroll event
*****************/

function boostiumOnscroll() {
    if( navbar !== null) {
        navbarColor(navbar);
    }
    if(typeof btnBackToTop !== 'undefined' && btnBackToTop !== null) {
        backToTopScroll();
    }
    if(typeof reviewSticky !== 'undefined' && reviewSticky !== null) {
        reviewStickyShow();
    }
}

window.addEventListener("scroll", boostiumOnscroll);

// ---------------------------------------------
// initialize popovers
// ---------------------------------------------
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl), {
        trigger: 'focus'
    }
})

// ---------------------------------------------
// load more / fetch posts
// ---------------------------------------------
/**
 * Load more function
 */
let boostiumLoadMoreBtns = document.querySelectorAll('button.load-more-button'),// get all load more buttons
    boostiumLoadMoreUrl = '',
    boostiumFetchUrl = '',
    boostiumParser = '';

if (boostiumLoadMoreBtns.length > 0) {
    // list sections with load more
    for( let i = 0; i<boostiumLoadMoreBtns.length; i++ ){

        boostiumLoadMoreBtns[i].postContainer = document.querySelector('#'+boostiumLoadMoreBtns[i].getAttribute('data-target'));
        let currentPage = boostiumLoadMoreBtns[i].getAttribute('data-currentpage');
        let totalPages = boostiumLoadMoreBtns[i].getAttribute('data-totalpages');
    
        if( currentPage < totalPages ){
        
            //run if there is more than 1 page
            boostiumLoadMoreBtns[i].disabled = false;
        
            //add event listner for the load more button
            boostiumLoadMoreBtns[i].addEventListener( 'click', loadMorePosts );
        
        }
    }
    
    boostiumLoadMoreUrl = document.location.href;
    boostiumFetchUrl = boostiumLoadMoreUrl.match(/[?]/) ? boostiumLoadMoreUrl + '&paged=' : boostiumLoadMoreUrl + '?paged='; //checking permalink structure
    boostiumParser = new DOMParser(); //Initialize the DOM parser
}

/**
 * @callback loadMorePosts
 * async function for the fetch function with await
 */
async function loadMorePosts(){
    //increment page number for each click
    this.disabled = true;
    let nextPage = parseInt(this.getAttribute('data-currentpage'), 10) + 1;
    this.setAttribute('data-currentpage', nextPage);

    let totalPages = parseInt(this.getAttribute('data-totalpages'), 10);
    this.innerHTML = this.getAttribute('data-txt-loading');

    let postClass = this.getAttribute('data-postclass');

    //fetch function and returned data
    let data = await ( await fetch( boostiumFetchUrl + nextPage ).catch( errorHandle ) ).text();

    //use DOMParser to convert text string to HTML nodes
    let htmlData = boostiumParser.parseFromString( data, 'text/html' );

    //select posts that will be appended
    let posts = htmlData.querySelectorAll(postClass);

    for( let i = 0; i<posts.length; i++ ){

        //initially add 'hide' class to the posts for fadein effect
        posts[i].classList.add('hide');

        //then append it to the container
        this.postContainer.append( posts[i] );
    }

    /*********** fadein effect ***********/
    //select all hidden posts
    let hiddenPosts = this.postContainer.querySelectorAll('.hide');
    let delay = 1;
    //set time out and make the posts visible
    //css transition will fade in
    Array.prototype.map.call( hiddenPosts, function(el){
        let timer = setTimeout( function(){
            el.classList.remove('hide');
            el.classList.add('show');
        }, 100*delay)
        delay++;
    })
    /*********** fadein effect ends ***********/

    if( nextPage == totalPages ){

        //if there is no more page,
        //disable the button
        this.disabled = true;
        this.innerHTML = this.getAttribute('data-txt-nomore');

    }else{

        //if there is more pages,
        //change the button text
        this.innerHTML = this.getAttribute('data-txt-loadmore');
        this.disabled = false;
    }
    
}

/**
 * @callback errorHandle
 * @param err to handle errors 
 */
function errorHandle(err){
    console.warn(err);
}