class Reporting {
    constructor(elementId, config) {
        this.elementId = elementId;
        this.config = config;
        this.paginationEnabled = config && config.paginationEnabled;
        this.totalItems = config && config.totalItems;
        this.requiredType = config && config.requiredType;
        this.exceptType = config && config.exceptType;
        this.currentPage = null;
        this.autoScrollIntoView = config && config.autoScrollIntoView;
        this.missing = config && config.missing;
        this.customItem = config && config.customItem;
        if (!elementId)
            console.error("Expected elementId is not available")
        this.init().then(r => {
        });
    }

    async init() {
        let page = 1;
        let size = 30;
        let missing = false;
        if (this.config) {
            if (this.config.page)
                page = this.config.page;
            if (this.config.size)
                size = this.config.size;
            if (this.config.missing)
                missing = this.config.missing;
        }
        await this.get_list(page, size, missing);
    }

    render_item(row, index) {
        if (this.customItem)
            return this.customItem(row, index)
        else
            return `
        <li>
            <div class="uk-height-1-1">
                <a class="wanted-item" href="#reporting-${this.missing ? "lost" : "wanted"}-modal-${index}" uk-toggle>
                    <div class="wanted-item__context">
                        <div class="uk-child-width-1-2@m uk-child-width-1-1 uk-grid uk-grid-collapse">
                            <div>
                                <div class="wanted-item__img">
                                    <img src="data:data:image/png;base64,${row.imgBase64}" alt="${row.firstname}" uk-cover>
                                </div> 
                            </div>
                            <div>
                                <div class="surname">
                                    <span>Эцэг /эх/:</span> ${row.lastname}
                                </div>
                                <div class="givenname">
                                    <span>Нэр:</span> ${row.firstname}
                                </div>
                                <div class="age">
                                    <span>Нас:</span> ${row.age}
                                </div>
                                <div class="sex">
                                    <span>Хүйс:</span> ${row.sex}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wanted-item__info">
                        <span>Мэдээлэл өгөх:</span> ${row.department}
                    </div>
                    <div class="wanted-item__info">
                        <span>Утас:</span> ${row.phone_number}
                    </div>
                </a>
            </div>
        </li>
        `;
    }

    render_modal(row, index) {
        const _this = this;
        return `
        <div id="reporting-${_this.missing ? "lost" : "wanted"}-modal-${index}" class="uk-modal-container" uk-modal>
            <div class="uk-modal-dialog uk-modal-body uk-padding-remove">
                <button class="uk-modal-close-default" type="button" uk-close></button>
<!--                <h2 class="uk-modal-title">Outside</h2>-->
                <div class="wanted-item wanted-modal">
                    <div class="wanted-item__context display-flex">
                        <div class="uk-width-1-5@xl uk-width-1-4@l uk-width-1-3@m uk-width-1-2">
                            <div class="wanted-item__img">
                                <img src="data:data:image/png;base64,${row.imgBase64}" alt="${row.firstname}" uk-cover>
                            </div>                        
                        </div>
                        <div>
                            <div class="surname">
                                <span>Эцэг /эх/:</span> ${row.lastname}
                            </div>
                            <div class="givenname">
                                <span>Нэр:</span> ${row.firstname}
                            </div>
                            <div class="age">
                                <span>Нас:</span> ${row.age}
                            </div>
                            <div class="sex">
                                <span>Хүйс:</span> ${row.sex}
                            </div>
                        </div>
                    </div>
                    <div class="uk-margin-medium-top" style="text-align: justify; font-size: 14px;">                
                        Танд энэ хүний талаар өгөх мэдээлэл байгаа бол доор байрлах 
                        <b>МЭДЭЭЛЭЛ ӨГӨХ УТСАНД</b> холбогдож
                        цагдаагийн байгууллагатай хамтран ажиллахыг хүсье.
                      <br>
                      <br>
                        <p class="" style="text-align: center; margin: 5px; color:red">
                            ГЭМТ ХЭРГЭЭС УРЬДЧИЛАН СЭРГИЙЛЭХ ТУХАЙ МОНГОЛ УЛСЫН ХУУЛИАС
                        </p>
                        <strong>35 дугаар зүйл.Гэмт хэрэг, зөрчлийн тухай мэдээллийг иргэдээс төлбөртэй авах</strong>
                        <p style="margin-top: 0;">
                                35.1.Гэмт хэрэг, зөрчил үйлдэхээр бэлтгэж байгаа болон үйлдсэн тухай мэдээллийг гэмт 
                                хэрэг, зөрчлийг хянан шалгах эрх бүхий байгууллага иргэдээс төлбөртэй авч болно. 
                                <br>
                                35.2.Гэмт хэрэг, зөрчлийн тухай мэдээллийг төлбөртэй авах ажиллагаанд Зөрчил шалган 
                                шийдвэрлэх тухай хуулийн 6.2 дугаар зүйл, Эрүүгийн хэрэг хянан шийдвэрлэх тухай хуулийн 
                                30.5 дугаар зүйлийг баримтална.
                                <br>
                                35.3.Гэмт хэрэг, зөрчлийн хэрэг бүртгэл, мөрдөн шалгах эрх бүхий байгууллага, албан 
                                тушаалтан мэдээллийн нууцыг чанд хадгалж, шаардлагатай бол мэдээлэгчийн аюулгүй байдлыг 
                                хангах арга хэмжээг авах үүрэгтэй.
                        </p>
                        
                      <br>
                        <p style="text-align: center;">
                            <b>МЭДЭЭЛЭЛ ӨГӨХ:
                                <span id="ctl00_ContentPlaceHolder1_phone">${row.phone_number}</span>
                                </b>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        `
    }

    renderPagination(page, size, totalPages) {
        const paginationContainer = document.getElementById(`pagination-container-${this.elementId}`);
        if (!paginationContainer) {
            console.error("Pagination container element not found");
            return;
        }

        const maxPaginationItems = 5; // Maximum number of pagination items to display

        // Calculate the starting and ending page numbers for the pagination
        let startPage = Math.max(1, page - Math.floor(maxPaginationItems / 2));
        let endPage = Math.min(totalPages, startPage + maxPaginationItems - 1);

        // Adjust the starting page if the ending page is at the maximum
        startPage = Math.max(1, endPage - maxPaginationItems + 1);

        // Create the pagination HTML
        let paginationHTML = `
          <ul class="uk-pagination">
              <li class="pagination-item ${page === 1 ? 'disabled' : ''}">
                  <a href="#" class="pagination-link" data-page="1">&laquo;</a>
              </li>
          `;

        for (let i = startPage; i <= endPage; i++) {
            paginationHTML += `
                <li class="pagination-item ${page === i ? 'uk-active' : ''}">
                    <a href="#" class="pagination-link" data-page="${i}">${i}</a>
                </li>
                `;
        }

        paginationHTML += `
      <li class="pagination-item ${page === totalPages ? 'disabled' : ''}">
          <a href="#" class="pagination-link" data-page="${totalPages}">&raquo;</a>
      </li>
  </ul>
  `;

        // Set the pagination HTML to the container
        paginationContainer.innerHTML = paginationHTML;

        // Add event listeners to pagination links
        const paginationLinks = paginationContainer.querySelectorAll('.pagination-link');
        paginationLinks.forEach(link => {
            if (!link.classList.contains('disabled')) {
                link.addEventListener('click', (event) => {
                    event.preventDefault();
                    const newPage = parseInt(event.target.dataset.page);
                    const newOffset = (newPage - 1) * size;
                    this.get_list(newPage, size);
                });
            }
        })
    }

    async get_list(page, size) {
        const _this = this;
        try {
            if (_this.autoScrollIntoView)
                document.getElementById(_this.elementId).scrollIntoView({behavior: 'smooth'});
            const itemsTarget = document.getElementById(_this.elementId);
            const wantedModalTarget = document.getElementById("wanted-modals-target");
            const lostModalTarget = document.getElementById("lost-modals-target");
            const spinnerElement = document.createElement("div");
            spinnerElement.className = "spinner-container";
            spinnerElement.innerHTML = `
            <div class="spinner-overlay"></div>
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; min-height: 300px; background-color: #efefef">
                <i class="fas fa-spinner fa-spin" style="font-size: 36px;"></i>
            </div>`;

            itemsTarget.innerHTML = ''; // Clear the content before adding the spinner
            itemsTarget.appendChild(spinnerElement);

            const response = await fetch(`/police/reporting?page=${page}&size=${size}&missing=${_this.missing ? true : false}`, {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                }
            });
            const data = await response.json();
            let html = "";
            let modalHTML = "";
            if (data && data.length > 0) {
                let index = 0;
                for (let row of data) {
                    html += _this.render_item(row, index);
                    modalHTML += _this.render_modal(row, index);
                    index++;
                }
            } else {
                html = "No items found.";
            }
            itemsTarget.removeChild(spinnerElement); // Remove the spinner after the content is updated
            itemsTarget.innerHTML = html; // Update the content with the loaded data
            if (this.missing)
                lostModalTarget.innerHTML = modalHTML;
            else
                wantedModalTarget.innerHTML = modalHTML;
            if (_this.paginationEnabled)
                _this.renderPagination(page, size, _this.totalItems); // Call renderPagination here
            if (_this.autoScrollIntoView)
                document.getElementById(_this.elementId).scrollIntoView({behavior: 'smooth'});
        } catch (error) {
            // Handle any error that occurred during the fetch request or data processing
            console.error(error);
        }
    }
}