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",
      ],
      pagination: {
          limit: 15,
          server: {
               url: (prev, page, limit) => `${prev}?page=${page}`
          }
      },
      sort: true,
      search: {
          server: {
               url: (prev, page, keyword) => `${prev}?page=${page}&search=${keyword}`
          }
      },
      server: {
          url: `${GlobalConfig.apiHost}/api/import-datasource`,
          then: data => data.data.map((item) => [item.id, item.message, item.response_body, item.status, item.created_at])
      }
    }).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();
});