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

class SyncronizeTask {
    init() {
        this.initTableImportDatasources();
        this.onSyncSubmit();
    }
    initTableImportDatasources() {
        new Grid({
            columns: ["ID", "Message", "Response", "Status", "Created"],
            search: {
                server: {
                    url: (prev, keyword) => `${prev}?search=${keyword}`,
                },
            },
            pagination: {
                limit: 15,
                server: {
                    url: (prev, page) =>
                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
                            page + 1
                        }`,
                },
            },
            sort: true,
            server: {
                url: `${GlobalConfig.apiHost}/api/import-datasource`,
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
                then: (data) =>
                    data.data.map((item) => [
                        item.id,
                        item.message,
                        item.response_body,
                        item.status,
                        item.created_at,
                    ]),
                total: (data) => data.meta.total,
            },
        }).render(document.getElementById("table-import-datasources"));
    }
    onSyncSubmit() {
        const form = document.getElementById("sync-form");
        if (form) {
            form.addEventListener("submit", function (event) {
                event.preventDefault(); // Prevent the default form submission

                const button = document.getElementById("btn-sync-submit");
                if (button) {
                    button.disabled = true;
                    button.innerText = "Processing...";
                }
                form.submit();
            });
        }
    }
}
document.addEventListener("DOMContentLoaded", function (e) {
    new SyncronizeTask().init();
});