let observer = init_observer();
let loc = location.href.split("/").slice(3)
let is_article = loc.find((elem) => elem === "article");
let is_category = loc[loc.length - 1] == "" ? false : true;

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 = $("#article-info").dataset.id
    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 post_reply_comment() {
    btn = document.querySelector("#reply")
    parts = window.location.href.split("/")
    path = parts[parts.length - 1]
    path_parts = path.split("-")
    article_id = $("#article-info").dataset.id
    comment_id = btn.parentElement.parentElement.id
    comment_id = comment_id.split("-")[1];
    btn.addEventListener("click", function () {
        form_holder = document.querySelector("#reply-box")
        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 !== "reply-website") {
                if (elem.value.trim() === "") {
                    counter++;
                }
                if (elem.id == "reply-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)
        })

        data.append("comment-id", comment_id);
        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=reply-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("#article-content").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 init_observer() {
    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);
    return observer
}
function lazy_load_img(image) {
    observer.observe(image);
}

function blog_lazy_load() {
    let images = document.querySelectorAll(".lazy")

    images.forEach((image) => {
        lazy_load_img(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 )`

        }
    })
}

function load_more() {
    let button = $("#load-more");
    if (button) {
        button.addEventListener("click", _handleLoadMore)
    }

    function _handleLoadMore() {

        let url = "/admin/blog-controller?action=load-more"
        if (is_category) {
            url += "&category=" + loc[loc.length - 1]
        }
        get_request(url, false, add_loaded)
    }

    function add_loaded(data) {
        if (data["success"] === undefined) {
            return false;
        }
        let articles_container = $("#blog-main")
        for (const art of data["success"]) {
            let cloned = $(".article").cloneNode(true);
//            cloned.classList.add("d-none")
            cloned.querySelector("a").href = "/blog/article/" + art["href"]
            cloned.querySelector("h3").innerHTML = art["title"]
            cloned.querySelector(".preview_date").innerHTML = art["date"]
            cloned.querySelector(".preview_text").innerHTML = art["preview-text"].substr(0, 100) + ". . ."
            cloned.querySelector("img").src = "/images/blog/transparent-small.webp";
            cloned.querySelector("img").dataset.src = "/images/blog/" + art["image"];
            cloned.querySelector("img").classList.add("lazy")
            cloned.querySelector("img").classList.remove("lazy-loaded")
            lazy_load_img(cloned.querySelector("img"))
            articles_container.insertBefore(cloned, articles_container.children[articles_container.children.length - 1])
            articles_container.insertBefore($create("hr"), articles_container.children[articles_container.children.length - 1])

        }
        console.log(data["loaded-all"])
        if (data["loaded-all"] === true) {
            button.classList.add("d-none")
        }
        blog_lazy_load();

    }
}

function format_date(timestamp) {
    const date = new Date(timestamp * 1000);
    const year = date.getFullYear();
    let month = date.toLocaleString('default', {month: 'long'});
    let day = date.getDay();
    if (month < 10) {
        month = "0" + month;
    }

    if (day < 10) {
        day = "0" + day;
    }

    return month + " " + day + ", " + year;
}

function comment_reply() {
    let buttons = $(".comment-reply-button", true)

    buttons.forEach(function (elem) {
        elem.addEventListener("click", () => {
            _handleCommentReply(elem)
        });
    })

    function _handleCommentReply(target) {
        let reply_box = $("#reply-box")
        let comment_box = target.parentElement.parentElement.parentElement
        console.log(reply_box);
        if (reply_box) {
            reply_box.remove();
        }
        reply_box = document.createElement("div")
        reply_box.setAttribute("id", "reply-box")
        reply_box.classList.add("position-relative")
        let box_header = document.createElement("span")
        let inputs_wrapper = document.createElement("div")

        let input_group = document.createElement("div")
        input_group.classList.add("input-group", "flex-column", "mt-2")

        let name_group = input_group.cloneNode(true);
        let name_i = document.createElement("input")
        name_i.classList.add("comments-input")
        let name_l = document.createElement("label")
        name_i.setAttribute("placeholder", "Dispaly name")
        name_i.setAttribute("id", "reply-name")
        name_l.innerHTML = "Name*"
        name_group.appendChild(name_l)
        name_group.appendChild(name_i)

        let web_group = input_group.cloneNode(true);
        let website_i = document.createElement("input")
        website_i.classList.add("comments-input")
        let website_l = document.createElement("label")
        website_l.innerHTML = "Website(optional)"
        website_i.setAttribute("placeholder", "https://domain.com")
        website_i.setAttribute("id", "reply-website")
        web_group.appendChild(website_l)
        web_group.appendChild(website_i)

        let content_group = input_group.cloneNode(true);
        let content_i = document.createElement("textarea")
        let content_l = document.createElement("label")
        content_i.setAttribute("placeholder", "Leave your thoughts here...")
        content_i.setAttribute("id", "reply-content")
        content_l.innerHTML = "Reply comment*"
        content_group.appendChild(content_l)
        content_group.appendChild(content_i)

        let close_i = document.createElement("i")
        close_i.classList.add("fa-solid", "fa-circle-xmark", "position-absolute", "text-danger");
        close_i.setAttribute("id", "close-reply")
        if (comment_box.querySelector(".comment-name a")) {
            commenter_name = comment_box.querySelector(".comment-name a").innerHTML
        } else {
            commenter_name = comment_box.querySelector(".comment-name").innerHTML
        }

        box_header.innerHTML = "<b>Reply to <span class='reply-to-name'>" + commenter_name + "</span></b>"

        inputs_wrapper.appendChild(box_header)
        inputs_wrapper.appendChild(name_group)
        inputs_wrapper.appendChild(web_group)
        inputs_wrapper.appendChild(content_group)
        reply_box.appendChild(inputs_wrapper)
        reply_box.appendChild(close_i)
        reply_box.innerHTML += '<button id="reply" class="btn btn-md btn-primary mt-2 p-2">Reply to Comment</button>'
        insertAfter(reply_box, comment_box.children[1])

        close_reply_box();
        post_reply_comment();
    }

    function close_reply_box() {
        let btn = $("#close-reply")

        if (btn) {
            btn.addEventListener("click", () => {
                let box = $("#reply-box")
                if (box) {
                    box.remove();
                }
            })
        }
    }
}

function change_nav_color() {
    const nav = $("nav")
    const rect = nav.getBoundingClientRect()
    const items = $(".navbar-nav a, .navbar-nav span", true)
//    console.log(window.scrollY)
    var logo = document.querySelector("#logo-link");
    var logoLetters = document.querySelectorAll(".logo-span-colored");

    var nav_menu = $("#navbar_collapse")
    if (nav_menu.classList.contains("show")) {
        if (logo) {
            //logo.classList.add("text-dark")
            logo.classList.add("text-white")
            logo.classList.add('ribbon');
        }

        if (logoLetters) {
            logoLetters.forEach(function (element) {
                element.classList.add("text-white");
                //element.classList.remove("text-white");
            });
        }


        //document.querySelector(".services > a:first-child:after").style.color = "black";
        items.forEach(function (el) {
            el.classList.add("text-dark")
            //el.classList.remove("text-shadoe-class");
        })
        nav.classList.add("nav-bg")

        return;
    }


    if (window.scrollY > rect.height) {

        if (logo) {
            //logo.classList.add("text-dark")
            logo.classList.add("text-white")
            logo.classList.add('ribbon');
        }

        if (logoLetters) {
            logoLetters.forEach(function (element) {
                element.classList.add("text-white");
                //element.classList.remove("text-white");
            });
        }


        //document.querySelector(".services > a:first-child:after").style.color = "black";
        items.forEach(function (el) {
            el.classList.add("text-dark")
            //el.classList.remove("text-shadoe-class");
        })
        nav.classList.add("nav-bg")
    } else {

        if (logo) {
            logo.classList.remove("text-dark")
            logo.classList.add("text-white")
        }

        if (logoLetters) {
            logoLetters.forEach(function (element) {
                //element.classList.remove("text-dark");
                element.classList.add("text-white");
            });
        }
        items.forEach(function (el) {
            el.classList.remove("text-dark")
            //el.classList.add("text-white");
            //el.classList.add("text-shadoe-class");
        })


        if (logo) {
            logo.classList.add("text-white")
            logo.classList.remove("text-dark")
            logo.classList.remove('ribbon');
        }
        nav.classList.remove("nav-bg")
        //document.querySelector(".services > a:first-child:after").style.color = "white";
    }

}

function document_scroll() {
    document.addEventListener("scroll", function (ev) {
//        console.log(ev)
        change_nav_color()
        subscribe_padding();
    }, true)
}

function subscribe_padding() {
    const section = $("#blog-side-menu")
    if (section) {
        const s_rect = section.getBoundingClientRect();
        if (s_rect.top - 80 <= 0) {
            section.style.paddingTop = "80px";
        } else {
            section.style.paddingTop = "0";

        }
    }
}

function toggle_nav() {
    btn = document.querySelector(".navbar-toggler")
    nav = document.querySelector("#navbar_collapse")
    main_nav = $("nav");
    btn.addEventListener("click", function () {
        if (nav.classList.contains("show")) {
            nav.classList.remove("show")
            change_nav_color()
        } else {
            nav.classList.add("show")
            change_nav_color()
        }
    })
}



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

}

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