import { Grid, html } from "gridjs";
import { addThousandSeparators } from "../global-config";

class PublicSearch {
    constructor() {
        this.table = null;
        const baseInput = document.getElementById("base_url_datatable");
        this.baseUrl = baseInput ? baseInput.value.split("?")[0] : "";
        this.keywordInput = document.getElementById("search_input");
        this.searchButton = document.getElementById("search_button");

        this.datatableUrl = this.buildUrl(this.keywordInput.value);
    }

    init() {
        this.bindSearchButton();
        this.initDatatable();
    }

    bindSearchButton() {
        const handleSearch = () => {
            const newKeyword = this.keywordInput.value.trim();

            // 1. Update datatable URL and reload
            this.datatableUrl = this.buildUrl(newKeyword);
            this.initDatatable();

            // 2. Update URL query string (tanpa reload page)
            const newUrl = `${window.location.pathname}${
                newKeyword ? `?keyword=${encodeURIComponent(newKeyword)}` : ""
            }`;
            window.history.pushState({ path: newUrl }, "", newUrl);

            // 3. Update visible keyword text di <em>{{ $keyword }}</em>>
            const keywordDisplay = document.querySelector(".qs-header em");
            if (keywordDisplay) {
                keywordDisplay.textContent = newKeyword || "-";
            }
        };

        this.searchButton.addEventListener("click", handleSearch);

        this.keywordInput.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
                event.preventDefault();
                handleSearch();
            }
        });
    }

    buildUrl(keyword) {
        const url = new URL(this.baseUrl, window.location.origin);

        if (keyword && keyword.trim() !== "") {
            url.searchParams.set("search", keyword);
        } else {
            url.searchParams.delete("search"); // pastikan tidak ada search param
        }

        return url.toString();
    }

    initDatatable() {
        const tableContainer = document.getElementById(
            "datatable-public-search"
        );

        const config = {
            columns: [
                "ID",
                { name: "Nama Pemohon" },
                { name: "Nama Pemilik" },
                { name: "Kondisi" },
                "Nomor Registrasi",
                "Status",
                "Jenis Fungsi",
                { name: "Nama Bangunan" },
                "Jenis Konsultasi",
                { name: "Tanggal Jatuh Tempo" },
                { name: "Retribusi" },
            ],
            search: false,
            pagination: {
                limit: 15,
                server: {
                    url: (prev, page) =>
                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
                            page + 1
                        }`,
                },
            },
            sort: true,
            server: {
                url: this.datatableUrl,
                then: (data) =>
                    data.data.map((item) => [
                        item.id,
                        item.name,
                        item.owner_name,
                        item.condition,
                        item.registration_number,
                        item.status_name,
                        item.function_type,
                        item.name_building,
                        item.consultation_type,
                        item.due_date,
                        addThousandSeparators(item.nilai_retribusi_bangunan),
                    ]),
                total: (data) => data.total,
            },
        };

        if (this.table) {
            this.table
                .updateConfig({
                    ...config,
                    server: { ...config.server, url: this.datatableUrl },
                })
                .forceRender();
        } else {
            tableContainer.innerHTML = "";
            this.table = new Grid(config).render(tableContainer);
        }
    }
}

document.addEventListener("DOMContentLoaded", function () {
    const app = new PublicSearch();
    app.init();
});