import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
import moment from "moment";

class BigdataResume {
    constructor() {
        this.toastMessage = document.getElementById("toast-message");
        this.toastElement = document.getElementById("toastNotification");
        this.toast = new bootstrap.Toast(this.toastElement);
        this.table = null;

        // Initialize functions
        this.initEvents();
    }
    async initEvents() {
        await this.initBigdataResumeTable();
        // this.handleSearch();
    }

    async initBigdataResumeTable() {
        let tableContainer = document.getElementById("table-bigdata-resumes");

        this.table = new Grid({
            columns: [
                { name: "ID" },
                { name: "Jumlah Potensi" },
                { name: "Total Potensi" },
                { name: "Jumlah Berkas Belum Terverifikasi" },
                { name: "Total Berkas Belum Terverifikasi" },
                { name: "Jumlah Berkas Terverifikasi" },
                { name: "Total Berkas Terverifikasi" },
                { name: "Jumlah Usaha" },
                { name: "Total Usaha" },
                { name: "Jumlah Non Usaha" },
                { name: "Total Non Usaha" },
                { name: "Jumlah Tata Ruang" },
                { name: "Total Tata Ruang" },
                { name: "Jumlah Menunggu Klik DPMPTSP" },
                { name: "Total Menunggu Klik DPMPTSP" },
                { name: "Jumlah Realisasi Terbit PBG" },
                { name: "Total Realisasi Terbit PBG" },
                { name: "Jumlah Proses Dinas Teknis" },
                { name: "Total Proses Dinas Teknis" },
                {
                    name: "Created",
                    attributes: {
                        style: "width: 200px; white-space: nowrap;",
                    },
                },
            ],
            pagination: {
                limit: 50,
                server: {
                    url: (prev, page) =>
                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
                            page + 1
                        }`,
                },
            },
            sort: true,
            search: {
                server: {
                    url: (prev, keyword) => `${prev}?search=${keyword}`,
                },
                debounceTimeout: 1000,
            },
            server: {
                url: `${GlobalConfig.apiHost}/api/bigdata-report`,
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
                then: (data) => {
                    return data.data.map((item) => [
                        item.id,
                        item.potention_count,
                        addThousandSeparators(item.potention_sum),
                        item.non_verified_count,
                        addThousandSeparators(item.non_verified_sum),
                        item.verified_count,
                        addThousandSeparators(item.verified_sum),
                        item.business_count,
                        addThousandSeparators(item.business_sum),
                        item.non_business_count,
                        addThousandSeparators(item.non_business_sum),
                        item.spatial_count,
                        addThousandSeparators(item.spatial_sum),
                        item.waiting_click_dpmptsp_count,
                        addThousandSeparators(item.waiting_click_dpmptsp_sum),
                        item.issuance_realization_pbg_count,
                        addThousandSeparators(
                            item.issuance_realization_pbg_sum
                        ),
                        item.process_in_technical_office_count,
                        addThousandSeparators(
                            item.process_in_technical_office_sum
                        ),
                        moment(item.created_at).format("YYYY-MM-DD H:mm:ss"),
                    ]);
                },
                total: (data) => data.total,
            },
            width: "auto",
            fixedHeader: true,
        });

        return new Promise((resolve) => {
            this.table.render(tableContainer);
            this.table.on("ready", resolve); // Tunggu event "ready"
        });
    }

    handleSearch() {
        document.getElementById("search-btn").addEventListener("click", () => {
            let searchValue = document.getElementById("search-box").value;

            if (!this.table) {
                // Ensure table is initialized
                console.error("Table element not found!");
                return;
            }

            this.table
                .updateConfig({
                    server: {
                        url: `${GlobalConfig.apiHost}/api/bigdata-report?search=${searchValue}`,
                        headers: {
                            Authorization: `Bearer ${document
                                .querySelector('meta[name="api-token"]')
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
                        then: (data) => {
                            return data.data.map((item) => [
                                item.id,
                                item.potention_count,
                                addThousandSeparators(item.potention_sum),
                                item.non_verified_count,
                                addThousandSeparators(item.non_verified_sum),
                                item.verified_count,
                                addThousandSeparators(item.verified_sum),
                                item.business_count,
                                addThousandSeparators(item.business_sum),
                                item.non_business_count,
                                addThousandSeparators(item.non_business_sum),
                                item.spatial_count,
                                addThousandSeparators(item.spatial_sum),
                                item.waiting_click_dpmptsp_count,
                                addThousandSeparators(
                                    item.waiting_click_dpmptsp_sum
                                ),
                                item.issuance_realization_pbg_count,
                                addThousandSeparators(
                                    item.issuance_realization_pbg_sum
                                ),
                                item.process_in_technical_office_count,
                                addThousandSeparators(
                                    item.process_in_technical_office_sum
                                ),
                                moment(item.created_at).format(
                                    "YYYY-MM-DD H:mm:ss"
                                ),
                            ]);
                        },
                        total: (data) => data.total,
                    },
                })
                .forceRender();
        });
    }
}
document.addEventListener("DOMContentLoaded", function (e) {
    new BigdataResume();
});