import {Controller} from '@hotwired/stimulus'
// Important: include a build with Ajax + pagination (TabulatorFull is simplest)
import {TabulatorFull as Tabulator} from 'tabulator-tables';
import {eyeIconLink, TABULATOR_FR_LANG} from "../js/global.js";

export default class extends Controller {
    static values = {aws: String};

    connect() {
        this.table();
    }

    table(){
        const table = new Tabulator("#tabulator-org", {
            // Register locales here
            langs: TABULATOR_FR_LANG,

            locale: "fr", //'en' for English, 'fr' for French (en is default, no need to include it)

            ajaxURL: "/organization/data",
            ajaxConfig: "GET",
            pagination: true,
            paginationMode: "remote",
            paginationSize: 10,
            //paginationSizeSelector: [5, 10, 20, 50],  // Désactivé pour l'instant car jpp faire de jolie style

            ajaxResponse: (url, params, response) => response,
            paginationDataSent: { page: "page", size: "size" },
            paginationDataReceived: { last_page: "last_page" },
            filterMode: "remote",

            ajaxURLGenerator: function(url, config, params) {
                let queryParams = new URLSearchParams();
                queryParams.append('page', params.page || 1);
                queryParams.append('size', params.size || 10);

                // Add filters
                if (params.filter) {
                    params.filter.forEach(filter => {
                        queryParams.append(`filter[${filter.field}]`, filter.value);
                    });
                }

                return `${url}?${queryParams.toString()}`;
            },

            ajaxSorting: true,
            ajaxFiltering: true,
            rowHeight: 60,
            layout: "fitColumns",      // activate French
            columns: [
                {
                    title: "Logo",
                    field: "logoUrl",
                    formatter: "image",
                    formatterParams: {
                        height: "50px",
                        width: "50px",
                        urlPrefix: "",
                        urlSuffix: "",
                    },
                    width: 100,
                },
                // TODO: regarder quel style est mieux entre les "hozAlign"
                // TODO: regarder quel style est mieux avec/sans headerFilter
                {title: "Nom", field: "name", headerFilter: "input", widthGrow: 2, vertAlign: "middle", headerHozAlign: "left"},
                {title: "Email", field: "email", headerFilter: "input", widthGrow: 2, vertAlign: "middle", hozAlign: "center"},
                {
                    title: "Actions",
                    field: "showUrl",
                    hozAlign: "center",
                    width: 100,
                    vertAlign: "middle",
                    headerSort: false,
                    formatter: (cell) => {
                        const url = cell.getValue();
                        if (url) {
                            return eyeIconLink(url);
                        }
                        return '';
                    }
                }],
        });
    }
}