import { Grid } from "gridjs/dist/gridjs.umd.js";
import "gridjs/dist/gridjs.umd.js";

class GeneralTable {
    constructor(tableId, apiUrl, baseUrl, columns, options = {}) {
        this.tableId = tableId;
        this.apiUrl = apiUrl;
        this.baseUrl = baseUrl; // Tambahkan base URL
        this.columns = columns;
        this.options = options;
    }

    init() {
        const table = new Grid({
            columns: this.columns,
            search: this.options.search || {
                server: {
                    url: (prev, keyword) => `${prev}?search=${keyword}`,
                },
            },
            pagination: this.options.pagination || {
                limit: 15,
                server: {
                    url: (prev, page) =>
                        `${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
                },
            },
            sort: this.options.sort || true,
            server: {
                url: this.apiUrl,
                headers: this.options.headers || {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
                then: (data) => this.processData(data),
                total: (data) => data.meta.total,
            },
        });

        table.render(document.getElementById(this.tableId));
        this.handleActions();
    }

    // Memproses data dari API
    processData(data) {
        return data.data.map((item) => {
            return this.columns.map((column) => {
                return item[column] || '';
            });
        });
    }

    handleActions() {
        document.addEventListener("click", (event) => {
            if (event.target && event.target.classList.contains('btn-edit')) {
                this.handleEdit(event);
            }
            if (event.target && event.target.classList.contains('btn-delete')) {
                this.handleDelete(event);
            }
            if (event.target && event.target.classList.contains('btn-create')) {
                this.handleCreate(event);
            }
        });
    }

    // Fungsi untuk menangani create
    handleCreate(event) {
        // Menggunakan model dan ID untuk membangun URL dinamis
        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
        window.location.href = `${this.baseUrl}/${model}/create`;
    }

    // Fungsi untuk menangani edit
    handleEdit(event) {
        const id = event.target.getAttribute('data-id');
        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
        console.log('Editing record with ID:', id);
        // Menggunakan model dan ID untuk membangun URL dinamis
        window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
    }

    // Fungsi untuk menangani delete
    handleDelete(event) {
        const id = event.target.getAttribute('data-id');
        console.log(id);
        if (confirm("Are you sure you want to delete this item?")) {
            this.deleteRecord(id);
        }
    }

    async deleteRecord(id) {
        try {
            console.log(id);
            const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
                method: 'DELETE',
                headers: this.options.headers || {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
                // headers: {
                //     'Authorization': `Bearer ${document.querySelector('meta[name="api-token"]').getAttribute("content")}`,
                //     'Content-Type': 'application/json',
                // },
            });
            if (response.status === 204) {  // Jika status code 204, berarti berhasil
                alert('Data deleted successfully!');
                location.reload();
            } else {
                const data = await response.json();  // Jika ada data di response body
                alert('Failed to delete data: ' + (data.message || 'Unknown error.'));
            }
        } catch (error) {
            console.error('Error deleting data:', error);
            alert('Error deleting data.');
        }
    }
}

export default GeneralTable;