$(document).ready(function () {
    //Event Customer-Care
    const customerCareDesktop = document.querySelector(
        ".faq__container--side-content > #accordion-right"
    ),
        customerCareMobile = document.querySelector(
            "#accordion.faq__container--accordion"
        ),
        deviceWidth = window.screen.width * window.devicePixelRatio;

    const faqSearchInput = $(".faq__search .form-control.ui-autocomplete-input"),
        faqAutoSuggestion = $(".ui-autocomplete.ui-front.sf-autocomplete"),
        faqResultsContainer = $(".faq .faq__container.faq__results"),
        faqSearchBtn = $(".faq__search .sf-search-input-wrapper .btn"),
        faqSearchPagination = $(".faq__search .pagination");
        faqSearchContainer = $(".faq__search");
            if ($(".sf-search-results").length) {
        $("#customer-care").addClass("d-none");
        $(".pagination").addClass("justify-content-center m-y-44 m-t-12-mb m-b-16-mb");
    }

    if ($.trim($(".sf-search-results").html() == "")) {
      $(".sf-search-results").addClass("no-result")
    }

    if (faqSearchContainer.length) {
        $(".faq__search > div:nth-child(2)").addClass(
            "faq__container faq__container--side-content"
        );
        $('.faq__search .pagination').attr('id', 'cdl-pagination');
        faqSearchBtn.addClass("disabled");
        faqSearchContainer
            .find(".form-inline")
            .addClass(
                "col-12 p-x-0 p-x-24-mb p-x-40-tl p-y-44 p-y-24-mb p-y-40-tl m-y-44 m-y-0-tl m-auto"
            );
        faqSearchContainer.find("h1").addClass("total-count no-pseudo-after m-0");
        faqSearchContainer.find("h1").parent().addClass("p-x-0");
        faqSearchContainer
            .find(".userSortDropdown")
            .addClass("faq__dropdown-box custom-select m-l-8-tl");
        faqSearchContainer
            .find(".userSortDropdown")
            .parent()
            .addClass("input-group-text m-0 bg-white");
        faqSearchContainer
            .find(".userSortDropdown")
            .parent()
            .parent()
            .addClass("faq__sort-by p-x-0");
        faqSearchContainer
            .find(".row")
            .addClass("col-12 col-lg-11 col-xl-10 p-x-0 p-x-24-mb p-x-40-tl flex-md-nowrap");
        faqSearchContainer
            .find(".sf-search-results")
            .addClass(
                "row flex-column col-12 col-lg-11 col-xl-10 p-x-0 p-x-24-mb p-x-40-tl m-t-24 accordion"
            );
        $(".faq__search .sf-media").addClass("card");
        $(".faq__search .sf-media").not(":last-child").addClass("m-b-16");
        $(".faq__search .sf-media").each((idx, element) => {
            $(element).find(".sf-media-body").addClass("w-100");
            $(element).find("h3").addClass("card-header m-0 custom-select collapsed");
            $(element)
                .find("h3")
                .attr("id", "heading" + idx);
            $(element).find("h3").attr("data-toggle", "collapse");
            $(element)
                .find("h3")
                .attr("data-target", "#collapseChild" + idx);

            $(element).find(".card-body-wrap").addClass("card-body collapse m-0");
            $(element)
                .find(".card-body-wrap")
                .attr("id", "collapseChild" + idx);
            $(element)
                .find("p")
                .attr("aria-labelledby", "heading" + idx);
        });
    }

    getFAQCategoriesAPI();
    //pagination
    function renderPaginationDesktop(
        categoryId,
        accordionChildId,
        totalPage = 0,
        activePage = 1
    ) {
        const cdlPaginationId = "cdl-pagination",
            cdlPagination = document.getElementById(cdlPaginationId) || document.querySelector(".pagination"),
            firstPayload = {
                categoryId: categoryId,
                pageIdx: 1,
                accordionChildId,
            },
            prevPayload = {
                categoryId: categoryId,
                pageIdx: activePage - 1,
                accordionChildId,
            },
            nextPayload = {
                categoryId: categoryId,
                pageIdx: activePage + 1,
                accordionChildId,
            },
            lastPayload = {
                categoryId: categoryId,
                pageIdx: totalPage,
                accordionChildId,
            };

        if (cdlPagination != null) {
            cdlPagination.innerHTML = "";

            if (!cdlPagination.classList.contains("p-t-40")) {
                cdlPagination.classList.add("p-t-40");
            }
        }

        if (totalPage > 1) {
            let prevItem = document.createElement("li"),
                nextItem = document.createElement("li"),
                firstItem = document.createElement("li"),
                lastItem = document.createElement("li"),
                firstSpreadItem = document.createElement("li"),
                secondSpreadItem = document.createElement("li");
            prevItem.classList.add("prev-btn");
            nextItem.classList.add("next-btn");
            firstItem.innerHTML = 1;
            lastItem.innerHTML = totalPage;
            firstSpreadItem.innerHTML = "...";
            secondSpreadItem.innerHTML = "...";
            if (activePage === 1) {
                prevItem.classList.add("disabled");
            }
            if (activePage === totalPage) {
                nextItem.classList.add("disabled");
            }
            cdlPagination.appendChild(prevItem);
            prevItem.addEventListener("click", function () {
                getFAQByCategoryIdAPI(prevPayload);
            });

            nextItem.addEventListener("click", function () {
                getFAQByCategoryIdAPI(nextPayload);
            });

            firstItem.addEventListener("click", function () {
                getFAQByCategoryIdAPI(firstPayload);
            });

            lastItem.addEventListener("click", function () {
                getFAQByCategoryIdAPI(lastPayload);
            });

            if (activePage === 1) {
                firstItem.classList.add("active");
                cdlPagination.appendChild(firstItem);
                let nextActiveItem = document.createElement("li");
                nextActiveItem.innerHTML = activePage + 1;
                cdlPagination.appendChild(nextActiveItem);
                nextActiveItem.addEventListener("click", function () {
                    getFAQByCategoryIdAPI(nextPayload);
                });
            } else {
                cdlPagination.appendChild(firstItem);
            }

            if (activePage === 2) {
                let activeItem = document.createElement("li");
                activeItem.innerHTML = activePage;
                activeItem.classList.add("active");
                cdlPagination.appendChild(activeItem);

                let nextActiveItem = document.createElement("li");
                nextActiveItem.innerHTML = activePage + 1;
                cdlPagination.appendChild(nextActiveItem);

                nextActiveItem.addEventListener("click", function () {
                    getFAQByCategoryIdAPI(nextPayload);
                });
            }
            if (activePage >= 4) {
                cdlPagination.appendChild(firstSpreadItem);
            }
            if (activePage >= 3) {
                let prevActiveItem = document.createElement("li");
                prevActiveItem.innerHTML = activePage - 1;
                cdlPagination.appendChild(prevActiveItem);

                let activeItem = document.createElement("li");
                activeItem.innerHTML = activePage;
                activeItem.classList.add("active");
                cdlPagination.appendChild(activeItem);

                let nextActiveItem = document.createElement("li");
                nextActiveItem.innerHTML = activePage + 1;
                cdlPagination.appendChild(nextActiveItem);

                prevActiveItem.addEventListener("click", function () {
                    getFAQByCategoryIdAPI(prevPayload);
                });

                nextActiveItem.addEventListener("click", function () {
                    getFAQByCategoryIdAPI(nextPayload);
                });
            }

            if (totalPage - 1 > activePage) {
                if (totalPage - 2 > activePage) {
                    cdlPagination.appendChild(secondSpreadItem);
                }
                lastItem.innerHTML = totalPage;
                cdlPagination.appendChild(lastItem);
            } else if (totalPage === activePage) {
                cdlPagination.removeChild(cdlPagination.lastChild);
            }

            cdlPagination.appendChild(nextItem);

            //component Go to page
            // let navPaginationWrapper = document.createElement("li"),
            //   navPagination = document.createElement("p"),
            //   inputPage = document.createElement("input");

            // inputPage.setAttribute("value", activePage);
            // inputPage.setAttribute("class", "input-page m-x-8");
            // inputPage.setAttribute("type", "number");
            // navPagination.innerHTML = "Go to";
            // navPagination.appendChild(inputPage);
            // navPagination.innerHTML = navPagination.innerHTML + "page";
            // navPaginationWrapper.appendChild(navPagination);
            // cdlPagination.appendChild(navPaginationWrapper);
            // ---

            // Event handler
            // $(".input-page").keyup(function (e) {
            //   if (e.target.value > totalPage) {
            //     e.target.value = totalPage;
            //   } else if (e.target.value < 1 && e.target.value !== "") {
            //     e.target.value = 1;
            //   }
            //   if (e.key === "Enter") {
            //     const payload = {
            //       categoryId: categoryId,
            //       pageIdx: +e.target.value,
            //       accordionChildId,
            //     };
            //     getFAQByCategoryIdAPI(payload);
            //   }
            // });
            //---
        }
    }

    //pagination mobile
    function renderPaginationMobile(
        categoryId,
        accordionChildId,
        totalPage = 0,
        activePage = 1
    ) {
        const listPaginationMobile =
            document.querySelectorAll(".pagination-mobile");
        listPaginationMobile.forEach((item, idx) => {
            item.innerHTML = "";
            if (totalPage > 1) {
                let prevItem = document.createElement("li"),
                    nextItem = document.createElement("li"),
                    activeItem = document.createElement("li"),
                    midItem = document.createElement("li"),
                    lastItem = document.createElement("li");

                prevItem.classList.add("prev-btn");
                nextItem.classList.add("next-btn");
                activeItem.innerHTML = activePage;
                activeItem.classList.add("active");
                midItem.innerHTML = "of";
                lastItem.innerHTML = totalPage;

                if (activePage === 1) {
                    prevItem.classList.add("disabled");
                }
                if (activePage === totalPage) {
                    nextItem.classList.add("disabled");
                }

                item.appendChild(prevItem);
                item.appendChild(activeItem);
                item.appendChild(midItem);
                item.appendChild(lastItem);
                item.appendChild(nextItem);

                prevItem.addEventListener("click", function () {
                    const payload = {
                        categoryId: categoryId,
                        pageIdx: activePage - 1,
                        accordionChildId,
                    };
                    getFAQByCategoryIdAPI(payload);
                });

                nextItem.addEventListener("click", function () {
                    const payload = {
                        categoryId: categoryId,
                        pageIdx: activePage + 1,
                        accordionChildId,
                    };
                    getFAQByCategoryIdAPI(payload);
                });

                lastItem.addEventListener("click", function () {
                    const payload = {
                        categoryId: categoryId,
                        pageIdx: totalPage,
                        accordionChildId,
                    };
                    getFAQByCategoryIdAPI(payload);
                });

                //component Go to page
                // let navPagination = document.querySelector(
                //     "#collapseParent" +
                //       accordionChildId.substring(14) +
                //       " > .pagination-short"
                //   ),
                //   inputPage = document.createElement("input");

                // inputPage.setAttribute("value", activePage);
                // inputPage.setAttribute("class", "input-page m-x-8");
                // inputPage.setAttribute("type", "number");
                // navPagination.innerHTML = "Go to";
                // navPagination.appendChild(inputPage);
                // navPagination.innerHTML = navPagination.innerHTML + "page";
                // ---

                // Event handler
                // $(".input-page").change(function (e) {
                //   if (e.target.value == "") {
                //     e.target.value = activePage;
                //   } else if (e.target.value > totalPage) {
                //     e.target.value = totalPage;
                //   } else if (e.target.value < 1 && e.target.value !== "") {
                //     e.target.value = 1;
                //   }
                //   if ($(window).width() < 1024) {
                //     const payload = {
                //       categoryId: categoryId,
                //       pageIdx: +e.target.value,
                //       accordionChildId,
                //     };
                //     getFAQByCategoryIdAPI(payload);
                //   }
                // });
                //---
            }
        });
    }

    function renderListCategory(personar) {
        const listCategoryData = personar.SubCategories;
        let categoriesWrapper = document.getElementById("accordion");
        if (categoriesWrapper != null) {
            categoriesWrapper.innerHTML = "";
        }
        listCategoryData.forEach((item, idx) => {
            //create header
            let categoryHeaderWrapper = document.createElement("div");
            categoryHeaderWrapper.classList.add("card");
            if (idx !== listCategoryData.length - 1) {
                categoryHeaderWrapper.classList.add("p-b-8");
            }

            let categoryHeader = document.createElement("div");
            categoryHeader.classList.add("card-header", "collapsed", "parent");
            categoryHeader.id = "headingParent" + idx;
            categoryHeader.setAttribute("data-toggle", "collapse");
            categoryHeader.setAttribute("data-target", "#collapseParent" + idx);

            let pCollapse = document.createElement("p");
            pCollapse.innerHTML = item.Title;
            pCollapse.classList.add("faq-header-text");

            categoryHeader.appendChild(pCollapse);
            categoryHeaderWrapper.appendChild(categoryHeader);

            if (categoriesWrapper != null) {
                categoriesWrapper.appendChild(categoryHeaderWrapper);
            }

            //create collapse content
            let collapseContentList = document.createElement("div");
            collapseContentList.id = "collapseParent" + idx;
            collapseContentList.classList.add("collapse", "faq-mobile");

            categoryHeaderWrapper.addEventListener("click", function () {
                const payload = {
                    categoryId: item.Id,
                    pageIdx: 1,
                    accordionChildId: "accordionChild" + idx,
                };

                let observer = new MutationObserver(function (event) {
                    if (event[0].target.className.indexOf("show") !== -1) {
                        if ($(window).width() < 1024) {
                            categoryHeaderWrapper.classList.add("active");
                        }
                    } else {
                        categoryHeaderWrapper.classList.remove("active");
                    }
                });

                observer.observe(collapseContentList, {
                    attributes: true,
                    attributeFilter: ["class"],
                    childList: false,
                    characterData: false,
                });

                getFAQByCategoryIdAPI(payload, false);
                let listCardHeaderParent = document.querySelectorAll(
                    ".card-header.parent"
                );
                listCardHeaderParent.forEach((el) => {
                    el.classList.remove("active");
                });
                categoryHeader.classList.add("active");
            });

            collapseContentList.setAttribute(
                "aria-labelledby",
                "headingParent" + idx
            );
            collapseContentList.setAttribute("data-parent", "#accordion");

            let accordionChild = document.createElement("div");
            accordionChild.id = "accordionChild" + idx;

            collapseContentList.appendChild(accordionChild);

            //render html pagination mobile
            let mobilePagination = document.createElement("ul");
            mobilePagination.classList.add(
                "pagination",
                "pagination-mobile",
                "justify-content-center",
                "align-items-center",
                "p-t-12"
            );
            collapseContentList.appendChild(mobilePagination);
            let shortPagination = document.createElement("p");
            shortPagination.classList.add("pagination-short", "p-t-20", "p-b-8");
            collapseContentList.appendChild(shortPagination);

            if (categoriesWrapper != null) {
                categoriesWrapper.appendChild(collapseContentList);
            }
        });

        //init get list FAQ
        const payload = {
            categoryId: listCategoryData[0].Id,
            pageIdx: 1,
            accordionChildId: "accordionChild0",
        };
        getFAQByCategoryIdAPI(payload, false);
        let listCardHeaderParent = document.querySelectorAll(".card-header.parent");
        if (listCardHeaderParent.length !== 0) {
            listCardHeaderParent[0].classList.add("active");
        }

        // IW 215  Contact us anchoring is not to correct position
        if (window.location.href && window.CDL_FUNCTION) {
            window.CDL_FUNCTION.SCROLL_TO_ANCHOR(window.location.href);
        }
    }

    function handleResultGetFAQCategoriesAPI(result) {
        let filterSelect = document.getElementById("filterSelect");
        if (filterSelect != null) {
            filterSelect.innerHTML = "";
        }
        //set data dropdown Personar
        result.value.forEach((item) => {
            let childOpt = document.createElement("option");
            childOpt.innerHTML = item.Title;
            childOpt.value = item.Id;
            if (filterSelect != null) {
                filterSelect.appendChild(childOpt);
            }
        });
        if (result.value[0].SubCategories.length) {
            renderListCategory(result.value[0]);
        }
        //event choose option
        filterSelect != null &&
            filterSelect.addEventListener("change", function (e) {
                const personar = result.value.find(
                    (item) => item.Id === e.target.value
                );
                renderListCategory(personar);
            });

        //
    }

    function handleResultGetFAQByCategoryIdAPI(result, accordionChildId) {
        const listFAQ = result.Items;
        let listCard = document.getElementById(accordionChildId);
        let accordionRight = document.getElementById("accordion-right");
        const totalCount = document.getElementById("total-count");
        if (listCard != null) {
            listCard.innerHTML = "";
        }

        if (accordionRight  != null) {
            accordionRight.innerHTML = "";
        }

        if (totalCount != null && result.TotalRecords) {
            totalCount.innerHTML = `${result.TotalRecords} search results`;
        }

        listFAQ.forEach((item, idx) => {
            //desktop
            let card = document.createElement("div");
            card.classList.add("card");

            if (idx !== listFAQ.length - 1) {
                card.classList.add("m-b-16");
            }

            let cardHeader = document.createElement("div");
            cardHeader.classList.add("card-header", "custom-select", "collapsed");
            cardHeader.id = "heading" + idx;
            cardHeader.setAttribute("data-toggle", "collapse");
            cardHeader.setAttribute("data-target", "#collapseChild" + idx);
            cardHeader.innerHTML = item.Title;

            cardHeader.addEventListener("click", () => {
                const customerCareCategory = document.querySelector(
                    `option[value][value="${document.querySelector("#filterSelect").value
                    }"]`
                ),
                    customerCareSubCategory = document.querySelector(
                        ".faq__container--accordion .card .card-header.active"
                    );
                requestTrackingMixpanel("Customer-Care", {
                    CustomerCare_Category: customerCareCategory.innerHTML.trim(),
                    CustomerCare_Sub_Category: customerCareSubCategory.innerText,
                    CustomerCare_Question: item.Title,
                });
            });

            card.appendChild(cardHeader);

            let cardBodyWrapper = document.createElement("div");
            cardBodyWrapper.id = "collapseChild" + idx;
            cardBodyWrapper.classList.add("collapse");
            cardBodyWrapper.setAttribute(
                "aria-labelledby",
                accordionChildId + "-heading" + idx
            );

            let cardBody = document.createElement("div");
            cardBody.classList.add("card-body");
            cardBody.innerHTML = item.Content;

            cardBodyWrapper.appendChild(cardBody);
            card.appendChild(cardBodyWrapper);

            accordionRight.appendChild(card);

            //mobile
            if (accordionChildId) {
                let card = document.createElement("div");
                card.classList.add("card", "card-children", "p-t-8");

                let cardHeader = document.createElement("div");
                cardHeader.id = accordionChildId + "-heading" + idx;
                cardHeader.classList.add("card-header", "collapsed");
                cardHeader.setAttribute("data-toggle", "collapse");
                cardHeader.setAttribute(
                    "data-target",
                    "#" + accordionChildId + "-collapseChild" + idx
                );
                cardHeader.addEventListener("click", () => {
                    const customerCareCategory = document.querySelector(
                        `option[value][value="${document.querySelector("#filterSelect").value
                        }"]`
                    ),
                        customerCareSubCategory = document.querySelector(
                            ".faq__container--accordion .card .card-header.active"
                        );
                    requestTrackingMixpanel("Customer-Care", {
                        CustomerCare_Category: customerCareCategory.innerHTML.trim(),
                        CustomerCare_Sub_Category: customerCareSubCategory.innerText,
                        CustomerCare_Question: item.Title,
                    });
                });
                let pCollapse = document.createElement("p");
                pCollapse.innerHTML = item.Title;
                pCollapse.classList.add("faq-header-text");

                cardHeader.appendChild(pCollapse);
                card.appendChild(cardHeader);

                let cardBodyWrapper = document.createElement("div");
                cardBodyWrapper.id = accordionChildId + "-collapseChild" + idx;
                cardBodyWrapper.classList.add("collapse");
                cardBodyWrapper.setAttribute(
                    "aria-labelledby",
                    accordionChildId + "-heading" + idx
                );

                let cardBody = document.createElement("div");
                cardBody.classList.add("card-body");
                cardBody.innerHTML = item.Content;

                cardBodyWrapper.appendChild(cardBody);
                card.appendChild(cardBodyWrapper);

                if (listCard != null) {
                    listCard.appendChild(card);
                }

                let observer = new MutationObserver(function (event) {
                    if (event[0].target.className.indexOf("show") !== -1) {
                        if ($(window).width() < 1024) {
                            card.classList.add("active");
                        }
                    } else {
                        card.classList.remove("active");
                    }
                });

                observer.observe(cardBodyWrapper, {
                    attributes: true,
                    attributeFilter: ["class"],
                    childList: false,
                    characterData: false,
                });
            }
        });
    }

    //API
    function getFAQCategoriesAPI() {
        const url =
            window.location.origin +
            // "https://citydevelopmentslimited-dev.sitefinity.cloud" +
            "/api/default/Default.GetFAQCategories()";
        $.ajax({
            url,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                handleResultGetFAQCategoriesAPI(result);
            },
        });
    }

    function getFAQByCategoryIdAPI(
        { categoryId, pageIdx, accordionChildId },
        anchorAnimation = true
    ) {
        if (anchorAnimation) {
            let headerHeight =
                $(".announcement-bar").outerHeight() + $("#header").outerHeight();
            $("html").animate(
                {
                    scrollTop: $("#customer-care").offset().top - headerHeight,
                },
                500
            );
        }

        const limitFAQElement =  document.getElementById("limitFAQ"),
            sortFAQElement =  document.getElementById("sortFAQ"),
            limit = limitFAQElement != null ? `, pageSize=${limitFAQElement.value}` : '',
            sort = sortFAQElement != null ? `, sortBy='${sortFAQElement.value}'` : '',
            url =
                window.location.origin +
                // "https://citydevelopmentslimited-dev.sitefinity.cloud" +
                "/api/default/Default.GetFAQs(pageIndex=" +
                pageIdx +
                limit +
                sort +
                ", categoryId='" +
                categoryId +
                "')";

        if (!$(".sf-search-results").length) {
            $.ajax({
                url,
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    handleResultGetFAQByCategoryIdAPI(result, accordionChildId);
                    renderPaginationDesktop(
                        categoryId,
                        accordionChildId,
                        result.TotalPages,
                        pageIdx
                    );
                    renderPaginationMobile(
                        categoryId,
                        accordionChildId,
                        result.TotalPages,
                        pageIdx
                    );
                },
            });
        }
    }

    if (faqSearchInput.length) {
        faqSearchInput.autocomplete({
            open: function () {
                const position = faqAutoSuggestion.css("top");
                faqAutoSuggestion.css({ top: parseInt(position, 10) + 4 + "px" });
            },
            search: function (event, ui) {
                if($(event.target).val().length >= event.isTrigger) {
                    if(faqSearchBtn.hasClass("disabled")) {
                        faqSearchBtn.removeClass("disabled")
                    }
                } else {
                    if(!faqSearchBtn.hasClass("disabled")) {
                        faqSearchBtn.addClass("disabled")
                    }
                }
                setTimeout(() => {
                    let w = $(this).autocomplete("widget").find("div"),
                        re = new RegExp("(" + this.value + ")", "gi");
                    w.html((i, html) =>
                        html.replace(re, "<span class='ui-state-highlight'>$1</span>")
                    );
                }, 10);
            }
        });
    }
});