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";
import GeneralTable from "../../table-generator.js";

const dataSpatialPlanningColumns = [
    "No",
    "Nama",
    "KBLI",
    "Kegiatan",
    "Luas",
    "Lokasi",
    "Nomor",
    "Tanggal",
    {
        name: "Actions",
        widht: "120px",
        formatter: function (cell, row) {
            const id = row.cells[8].data;
            const model = "data/spatial-plannings";
            return gridjs.html(`
                <div class="d-flex justify-items-end gap-10">
                    <button class="btn btn-warning me-2 btn-edit" 
                        data-id="${id}" 
                        data-model="${model}">
                        <i class='bx bx-edit'></i></button>
            
                    <button class="btn btn-red btn-delete" 
                        data-id="${id}">
                        <i class='bx bxs-trash'></i></button>
                </div>
            `);
        },
    },
];

document.addEventListener("DOMContentLoaded", () => {
    const table = new GeneralTable(
        "spatial-planning-data-table",
        `${GlobalConfig.apiHost}/api/spatial-plannings`,
        `${GlobalConfig.apiHost}`,
        dataSpatialPlanningColumns
    );

    table.processData = function (data) {
        return data.data.map((item) => {
            return [
                item.no,
                item.name,
                item.kbli,
                item.activities,
                item.area,
                item.location,
                item.number,
                item.date,
                item.id,
            ];
        });
    };

    table.init();
});