function post_blog_comment(){
    btn = document.querySelector("#post-comment")
    parts = window.location.href.split("/")
    path = parts[parts.length - 1]
    path_parts = path.split("-")
    article_id = path_parts[path_parts.length - 1]
    btn.addEventListener("click",function(){
        form_holder = document.querySelector("#comment-form")
        inpts = form_holder.querySelectorAll("input, textarea")
        let counter = 0;
        let bad_url_flag = false;
        let char_limit = 1000;
        let limit_reached = false;
        data = new FormData()
        
        inpts.forEach(function(elem){
            if( elem.id !== "website" ){
                if( elem.value.trim() === "" ){
                    counter++;
                }
                if(elem.id == "content" ){
                    if( elem.value.length > char_limit ){
                        limit_reached = true;
                    }
                }
            }else{
                if( elem.value.trim() !== "" && !isValidUrl(elem.value)){
                    bad_url_flag = true;
                }

            }
            data.append(elem.id, elem.value)
        })
        if( counter > 0 ){
            set_alert("Please fill all required fields!", "danger")
            return false;
        }
        if( bad_url_flag ){
            set_alert("Please use a valid website URL!", "danger")
            return false;
        }
        if( limit_reached ){
            set_alert("The comment must not exceed " + char_limit + " characters!", "danger")
            return false;
        }
        url = "/admin/blog-controller?action=create&item=comment&article_id=" + article_id;
        
        post_form_request(url, data);
        
    })
}

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}
  
function  check_if_dev(){
    if( location.hostname.indexOf("dev") !== -1 ){
        return true;
    }else{
        return false;
    }
}

function load_analitics(){
    var include_tag = document.createElement("script");
    include_tag.src = "https://googletagmanager.com/gtag/js?id=G-JMJ9E5GWL9";
    document.getElementsByTagName("head")[0].appendChild(include_tag);

    var script_tag = document.createElement("script");
    script_tag.setAttribute("async", "async");
    script_tag.innerHTML = 
    "window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'G-JMJ9E5GWL9');";
    document.getElementsByTagName("head")[0].appendChild(script_tag);
}


function toggle_article_comments(){
    let btn = document.querySelector(".comment-section-toggler")
    let section = document.querySelector("#comments-section")
    section_height = 0;
    Array.from(section.children).forEach(function(elem){
        console.log(elem.scrollHeight)
        console.log(elem)
        section_height += elem.scrollHeight;
    })
    btn.addEventListener("click", function(){
        if( section.style.height == 0 || section.style.height == "0px"){
            section.style.height = ( section_height + 50) + "px";
            btn.classList.remove("arrow-toggler-right")
            btn.classList.add("arrow-toggler-up")
        }else{
            btn.classList.remove("arrow-toggler-up")
            btn.classList.add("arrow-toggler-right")
            section.style.height = "0";
        }
    })
}

function subscribe_bn(){
    bn_btn = document.querySelector("#subscribe_bn")
    
    bn_btn.addEventListener("click", function(){
        email = bn_btn.parentElement.children[0].value
        name = bn_btn.parentElement.children[1].value
      
        if( email.trim() === "" || name.trim() === ""){
            set_alert("Please fill all the required inputs!", "danger");
            return false;
        }
        
        if( !validate_email(email) ){
            set_alert("Please use a vaild email address!", "danger");
            return false;
        }
        url = '/admin/blog-controller?action=create&item=newsletter';
        data = new FormData();
        data.append("email_address", email)
        data.append("name", name)
        post_form_request(url, data)
    
    })
    
}
function blog_article_nav(){
    headings =  document.querySelector(".page-content-container").querySelectorAll("h2");
    
    list = document.querySelector("#article-contents-wrapper").querySelector("ul")
    
    headings.forEach(function(heading){
        li = document.createElement("li")
        link = document.createElement("a")
        
        link.innerHTML = heading.innerHTML;
        link.href = "#"
        
        li.appendChild(link)
        list.appendChild(li)
        
        link.addEventListener("click", function(ev){
            ev.preventDefault()
            h_box = heading.getBoundingClientRect()
            console.log(findPosition(heading))
            window.scroll(0, findPosition(heading))
        })
        
        function findPosition(obj) {
            var currenttop = 0;
            if (obj.offsetParent) {
              do {
                currenttop += obj.offsetTop;
              } while ((obj = obj.offsetParent));
              return [currenttop - 100];
            }
      }
    })
}

function blog_lazy_load(){
    let images = document.querySelectorAll(".lazy")
    let options = {
        root: null,
        rootMargin: '0px 0px 50px 0px',
        threshold: 0.5
    }

    
    let callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            if(img.getAttribute("data-srcset")){
                const src = img.getAttribute("data-srcset");
                img.setAttribute("srcset", src);
                img.classList.remove("lazy")
                img.classList.add("lazy-loaded")
                observer.unobserve(img);
            }else if(img.getAttribute("data-src")){
                const src = img.getAttribute("data-src");
                img.setAttribute("src", src);
                img.classList.remove("lazy")
                img.classList.add("lazy-loaded")
                observer.unobserve(img);
            }
           
        }
        // and some other methods
        })
    }
    
    let observer  = new IntersectionObserver (callback, options);
    images.forEach((image) => {
      observer.observe(image);
    });
    
}

function article_scroll(){
     let side =  $("#blog-side-menu")
    let side_rect = side.getBoundingClientRect()
    let original_top  =side_rect.y
            let nav_rect = $(".navbar").getBoundingClientRect()

    if(original_top == 0){
        $("#blog-side-menu").style.paddingTop = `calc( ${nav_rect.height}px + 30px )`
    }

    document.addEventListener("scroll", ()=>{
        let nav_rect = $(".navbar").getBoundingClientRect()
        let side =  $("#blog-side-menu")
        let side_rect = side.getBoundingClientRect()
        if ( nav_rect.bottom >= side_rect.top) {
//           if( side_rect.top == 0){
        if( side_rect.y > 0){
            $("#blog-side-menu").style.paddingTop = `calc( ${nav_rect.height}px - ${side_rect.y}px  + 30px )`
        }
        }else{
            $("#blog-side-menu").style.paddingTop = `0px`
//            $("#blog-side-menu").style.paddingTop = `calc( ${nav_rect.height}px - ${side_rect.top}px - 30px )`

        }
    })
}




var loc = location.href.split("/").slice(3)
var is_article = loc.find( (elem) => elem === "article");

if( is_article){
    post_blog_comment()
    subscribe_bn()
    blog_article_nav()
    blog_lazy_load()
    toggle_article_comments()
}else{
    subscribe_bn();
    blog_lazy_load()
    
}

if( !check_if_dev()){
    load_analitics();
}
//article_scroll();