$(document).ready(function () {
    $(".investor-themetable-container").each(function () {
        init(this);
    })
})

function init(el) {
    var NUMBER_OF_ITEM_PER_PAGE = 8;
    var CONST_FEATURE = {
        SGX: "sgxnewtheme",
        CIRCULAR: "circularsandprospectus",
    }

    var config = {
        filter: ["from", "to", "tag"],
        isPagination: true,
        key: CONST_FEATURE.SGX,
    }
    var currentPage;
    var jsonResponse = [];

    var dataToRender = [];

    var selectors = {
        contentContainer: $(el).find(".olam-annualreport-table-content"),
        pagination_prev: $(el).find(".js-page-prev"),
        pagination_next: $(el).find(".js-page-next"),
        noRecord: $(el).find(".olam-annualreport-norecord"),
        pagination_wrapper_content: $(el).find(".pagination-items-themetable"),
        pagination_number_container: $(el).find(".number-container-append"),
        col_header_container: $(el).find(".investorrelators-grid-header"),
        filter_search_field: $(el).find(".investorrelators-grid-searchContainer #project-name"),
        filter_search_field_search_icon: $(el).find(".investorrelators-grid-search-icon"),
        filter_search_field_close_icon: $(el).find(".investorrelators-grid-search-close"),
        filter_container: $(el).find(".investorrelators-grid-filter-container"),
        filter_container_label_element: $(el).find(".investorrelators-grid-filter-container label"),
        filter_from_date: $(el).find(".investorrelators-grid-datepicker-fromdate"),
        filter_to_date: $(el).find(".investorrelators-grid-datepicker-todate"),
        filter_mobile_container: $(el).find(".investorrelators-grid-filter-mobile-update")
    }

    var attributeNode = $(el).find(".themetable-attributes");
    var irLibraryRootPath;
    var readMoreText;
    var irThemeTableApiUrl;
    if (attributeNode) {
        NUMBER_OF_ITEM_PER_PAGE = $(attributeNode).attr("resultPerPage");
        irLibraryRootPath = $(attributeNode).attr("irLibraryRootPath");
        readMoreText = $(attributeNode).attr("readMoreText");
        NUMBER_OF_ITEM_PER_PAGE = NUMBER_OF_ITEM_PER_PAGE ? parseInt(NUMBER_OF_ITEM_PER_PAGE) : 8;
        config.key = $(attributeNode).attr("featureKey");
        irThemeTableApiUrl = $(attributeNode).attr("irThemeTableApiUrl");
    }

    var appendRequestParam = "";
    if (window.location.pathname.endsWith("/investor-library.html")) {
        appendRequestParam = "?prevpage=irlibrary";
        irLibraryClasses = " card-box sgx-filings";
    } else if (window.location.pathname.endsWith("/all-news.html")) {
        appendRequestParam = "?prevpage=allnews";
    }

    function renderColHeader() {
        let headerContent = '';
        if (config.key == CONST_FEATURE.SGX) {
            headerContent = `
            <div class="investorrelators-grid-header-date">Date</div>
            <div class="investorrelators-grid-header-title">Title</div>`
        } else if (config.key == CONST_FEATURE.CIRCULAR) {
            headerContent = `
            <div class="investorrelators-grid-header-title">Title</div>`
        }
        $(selectors.col_header_container).html(headerContent);
    }
    renderColHeader();

    function manupulateResponse(response) {
        if (config.key == CONST_FEATURE.SGX) {
            let data = [...response.data.slice()];
            jsonResponse = data;
            dataToRender = data.slice();
            if (data.length > 0) {
                doFilter();//initial we have to show the date filtered data
            }
        } else if (config.key == CONST_FEATURE.CIRCULAR) {
            let data = [...response.data.slice()];
            jsonResponse = data;
            dataToRender = data.slice();
            if (data.length > 0) {
                doFilter();//initial we have to show the date filtered data
            }
        }
    }

    function renderData(page) {
        let dataToRenderCurrent;
        if (config.isPagination) {
            currentPage = page;
            const startIndex = (page - 1) * NUMBER_OF_ITEM_PER_PAGE;
            const endIndex = parseInt(startIndex) + NUMBER_OF_ITEM_PER_PAGE;
            dataToRenderCurrent = dataToRender.slice(startIndex, endIndex);
            renderPaginationWrapper();
        } else {
            dataToRenderCurrent = dataToRender.slice();
        }

        if (dataToRenderCurrent.length < 1) {
            renderNoRecord();
            return;
        }

        if (config.key == CONST_FEATURE.SGX) {
            let htmlRender = "";
            dataToRenderCurrent.map(item => {
                const formattedDate = moment(item.originalDate).format("DD MMM YYYY");
                htmlRender += `<div class="investorrelators-grid-item">
            <div class="investorrelators-grid-item-date">${DOMPurify.sanitize(formattedDate)}</div>
            <div class="investorrelators-grid-item-title">${DOMPurify.sanitize(item.title)}</div>
            <a class="investorrelators-grid-item-readmore" href=${DOMPurify.sanitize(item.pagePath + appendRequestParam)}>${readMoreText ? DOMPurify.sanitize(readMoreText) : "Read More"}</a>
        </div>`
            })
            $(selectors.contentContainer).html(htmlRender);
        } else if (config.key == CONST_FEATURE.CIRCULAR) {
            var currenturl = window.location.href.split('?')[0];
            var resultURI = encodeURI(currenturl);
            let htmlRender = "";
            dataToRenderCurrent.map(item => {
                const readMoreLink = item.pagePath + "?refer=" + resultURI + "?source=librarydata";
                const downloadLink = DOMPurify.sanitize(item.downloadLink[0].filePath)
                htmlRender += `<div class="investorrelators-grid-item">
            <div class="investorrelators-grid-item-title">${DOMPurify.sanitize(item.title)}</div>
            <a class="investorrelators-grid-item-readmore" style="display:none;" href=${readMoreLink}>${readMoreText ? DOMPurify.sanitize(readMoreText) : "Read More"}</a>
            <a target="_blank" class="investorrelators-grid-item-download" aria-label="Download report icon" href=`+ downloadLink + `><span alt="download-icon" class="annualreport-download-icon"/></a>
            </div>`
            })

            $(selectors.contentContainer).html(htmlRender);
        }
    }

    function renderNoRecord() {
        $(selectors.pagination_wrapper_content).hide();
        $(selectors.contentContainer).html(`<h5 class="text-center olam-annualreport-norecord">No records found</h5>`);
        $(selectors.noRecord).show();
    }

    function renderPaginationWrapper() {
        var pages = dataToRender.length / NUMBER_OF_ITEM_PER_PAGE;
        if (Number(pages) === pages && pages % 1 !== 0) {
            pages = pages + 1;
        }
        var paginationList = pagination(parseInt(currentPage), parseInt(pages));

        $(el).find(".js-pagination").remove();
        if (paginationList.length > 1) {
            $(selectors.pagination_wrapper_content).show();

            $.each(paginationList, function (index, value) {

                if (isNaN(value)) {
                    $(selectors.pagination_number_container).before("<li class=\"pagination-item js-pagination js-disabled \">" + value + "</li>");
                } else {
                    if (currentPage == value) {
                        $(selectors.pagination_number_container).before("<li class=\"pagination-item pagination-item-active js-pagination\">" + value + "</li>");
                    } else {
                        $(selectors.pagination_number_container).before("<li class=\"pagination-item js-pagination\">" + value + "</li>");
                    }
                }
            });
        } else {
            $(selectors.pagination_wrapper_content).hide();
            return;
        }


        $(el).find(".js-pagination:not(.js-disabled)").unbind().click(function () {
            $(this).addClass("pagination-item-active");
            let clickedItemNo;
            clickedItemNo = parseInt($(this).text());
            if (clickedItemNo != currentPage) {
                renderData(clickedItemNo);
                $(selectors.col_header_container)[0].scrollIntoView({ behavior: "smooth", block: "center" })
            }
        })
        $(selectors.pagination_prev).unbind().click(function () {
            if (currentPage != 1) {
                renderData(currentPage - 1);
                $(selectors.col_header_container)[0].scrollIntoView({ behavior: "smooth", block: "center" })
            }
        })
        $(selectors.pagination_next).unbind().click(function () {
            const maxPage = Math.ceil(dataToRender.length / NUMBER_OF_ITEM_PER_PAGE)
            if (currentPage < maxPage) {
                renderData(currentPage + 1);
                $(selectors.col_header_container)[0].scrollIntoView({ behavior: "smooth", block: "center" })
            }
        })
    }

    // make api call and get the data to render on UI
    function getData() {
        $(selectors.pagination_wrapper_content).hide();
        $(selectors.noRecord).hide();
        if (config.key == CONST_FEATURE.SGX) {
            let categories = "SGX Filings"
            const payload = {
                fromDate: "", toDate: "",
                categories,
                irlibrary: irLibraryRootPath,
                filterType: "IRLIBRARY"
            }
            $(selectors.contentContainer).html(
                `<div id="theme-table-loader"><img class="loader-imgx" src="/content/dam/olamgroup/contactus/ldr.gif" /></div>`);
            $.ajax({
                url: irThemeTableApiUrl,
                type: "GET",
                dataType: "json",
                data: payload,
                cache: false,
                success: function (response) {
                    if (response.data !== undefined && response.data.length > 0) {
                        manupulateResponse(response);
                    }
                    else {
                        renderNoRecord();
                    }
                },
                error: function (jqXHR, exception) {
                    console.log("::ajax error-->", jqXHR)
                    renderNoRecord();
                }
            });
        } else if (config.key == CONST_FEATURE.CIRCULAR) {
            let categories = "Circulars & Prospectus";
            const payload = {
                fromDate: "", toDate: "",
                categories,
                irlibrary: irLibraryRootPath,
                filterType: "IRLIBRARY"
            }
            $(selectors.contentContainer).html(
                `<div id="theme-table-loader"><img class="loader-imgx" src="/content/dam/olamgroup/contactus/ldr.gif" /></div>`);
            $.ajax({
                url: encodeURI(irThemeTableApiUrl),
                type: "GET",
                dataType: "json",
                data: payload,
                cache: false,
                success: function (response) {
                    if (response.data !== undefined && response.data.length > 0) {
                        manupulateResponse(response);
                    }
                    else {
                        renderNoRecord();
                    }
                },
                error: function (jqXHR, exception) {
                    console.log("::ajax error-->", jqXHR)
                    renderNoRecord();
                }
            });
        }


    }

    //filter the user filter from UI side
    function doFilter() {
        const fromDateField = moment(DOMPurify.sanitize($(selectors.filter_from_date).val()), "DD/MM/YYYY");
        const toDateField = moment(DOMPurify.sanitize($(selectors.filter_to_date).val()), "DD/MM/YYYY");
        const search_keyword = DOMPurify.sanitize($(selectors.filter_search_field).val().trim());
        dataToRender = [];
        jsonResponse.filter(item => {
            const originalDate = moment(DOMPurify.sanitize(moment(item.originalDate).format("DD/MM/YYYY")), "DD/MM/YYYY");
            let isMatched = originalDate.isBetween(fromDateField, toDateField, "days", "[]"); //including from,to Date

            if (search_keyword && isMatched) {
                isMatched = item.title.toUpperCase().includes(search_keyword.toUpperCase())
            }
            isMatched && dataToRender.push(item);
        })
        renderData(1);
    }
    //onclick of search from searchbox
    function onClickSearch(searchText) {
        if (searchText != "") {
            $(selectors.filter_search_field_search_icon).hide();
            $(selectors.filter_search_field_close_icon).show();
        } else {
            $(selectors.filter_search_field_search_icon).show();
            $(selectors.filter_search_field_close_icon).hide();
        }
        doFilter();
    }

    getData();

    $(selectors.filter_from_date).datepicker({
        beforeShow: function (textbox, instance) {
            var txtBoxOffset = $(this).offset();
            var top = txtBoxOffset.top;
            setTimeout(function () {
                instance.dpDiv.css({
                    top: top + 55 //you can adjust this value accordingly
                });
            }, 0);
        },
        dateFormat: "dd/mm/yy"
    }).on("change", () => {
        doFilter();
    });

    $(selectors.filter_to_date).datepicker({
        beforeShow: function (textbox, instance) {
            var txtBoxOffset = $(this).offset();
            var top = txtBoxOffset.top;
            setTimeout(function () {
                instance.dpDiv.css({
                    top: top + 55 //you can adjust this value accordingly
                });
            }, 0);
        },
        dateFormat: "dd/mm/yy"
    }).on("change", () => {
        doFilter();
    });

    /* This click event will trigger to search the value based on the click of search icon */
    $(selectors.filter_search_field_search_icon).on("click", function (event) {
        let search_keyword = DOMPurify.sanitize($(selectors.filter_search_field).val().trim());

        if (search_keyword.length >= 3) {
            //do with the searched value
            onClickSearch(search_keyword);
        }
    });
    /* This click event will trigger to clear the searched input */
    $(selectors.filter_search_field_close_icon).on("click", function (event) {
        $(selectors.filter_search_field).val("");
        onClickSearch("");
        //empty with search
    });

    /* This keyup event will trigger to search the value based on the enter key press */
    $(selectors.filter_search_field).on("keyup", function (e) {
        let search_keyword = DOMPurify.sanitize($(selectors.filter_search_field).val().trim());
        if (e.key === "Enter" && search_keyword.length >= 3) {
            //do with the searched value
            onClickSearch(search_keyword);
        }
        if (search_keyword.length == 0) {
            $(selectors.filter_search_field).val("");
            onClickSearch("");
            //empty with search
        }
    });
    if (config.key == CONST_FEATURE.CIRCULAR) {//only for circular from date will be past 2years from currentdate
        var fromDate = moment(new Date()).subtract(2, "years").format("DD/MM/YYYY"); // Setting the from date value to two years before
        var toDate = moment(new Date()).format("DD/MM/YYYY"); // Getting the current date
    } else {
        var fromDate = moment(new Date()).subtract(180, "days").format("DD/MM/YYYY"); // Setting the from date value to Six months before
        var toDate = moment(new Date()).format("DD/MM/YYYY"); // Getting the current date
    }

    $(selectors.filter_to_date).empty();
    $(selectors.filter_to_date).val(toDate);
    $(selectors.filter_from_date).empty();
    $(selectors.filter_from_date).val(fromDate);

    $(window).on("load resize", function () {
        if (window.innerWidth > 990) {
            $(selectors.filter_container).detach().appendTo(selectors.col_header_container);
            $(selectors.filter_container_label_element).hide();
        } else {
            $(selectors.filter_container).detach().prependTo(selectors.filter_mobile_container);
            $(selectors.filter_container_label_element).show();
        }
    })

};

//util method to generate the pagination numbers list and ... -based on the currentpage and maxpage
function pagination(c, m) {
    var current = c;
    var last = m;
    var delta = 2;
    var left = current - delta;
    var right = current + delta + 1;
    var range = [];
    var rangeWithDots = [];
    var l;

    for (var i = 1; i <= last; i++) {
        if (i == 1 || i == last || i >= left && i < right) {
            range.push(i);
        }
    }

    for (var i = 0; i < range.length; i++) {
        if (l) {
            if (range[i] - l === 2) {
                rangeWithDots.push(l + 1);
            } else if (range[i] - l !== 1) {
                rangeWithDots.push("...");
            }
        }
        rangeWithDots.push(range[i]);
        l = range[i];
    }

    return rangeWithDots;
}