import { Alert } from "sigpro-ui";
import { Grid } from "sigpro-grid";
import { isDark } from "../App.js";
import { h, $ } from "sigpro";

export const Desktop = () => {
    const test = $(55);
    const rowData = [
        { id: 1, nombre: "Juan Pérez", edad: 28, ciudad: "Madrid", activo: true, fecha: "2024-01-15" },
        { id: 2, nombre: "María García", edad: 34, ciudad: "Barcelona", activo: true, fecha: "2024-02-20" },
        { id: 3, nombre: "Carlos López", edad: 45, ciudad: "Valencia", activo: false, fecha: "2024-03-10" },
        { id: 4, nombre: "Ana Martínez", edad: 23, ciudad: "Sevilla", activo: true, fecha: "2024-04-05" }
    ];
    const detailCellRendererParams = {
        // provide the Grid Options to use on the Detail Grid
        detailGridOptions: {
            columnDefs: [
                { field: 'callId' },
                { field: 'direction' },
                { field: 'number' }
            ]
        },
        // get the rows for each Detail Grid
        getDetailRowData: params => {
            params.successCallback(params.data.callRecords);
        }
    }
    const columnDefs = [
        { field: "id", headerName: "ID", width: 80, filter: 'agMultiColumnFilter', cellRenderer: "agGroupCellRenderer" },
        { field: "nombre", headerName: "Nombre", width: 150, filter: 'agMultiColumnFilter', editable: true },
        { field: "edad", headerName: "Edad", width: 100, filter: 'agMultiColumnFilter' },
        { field: "ciudad", headerName: "Ciudad", width: 150, filter: 'agMultiColumnFilter' },
        {
            field: "activo",
            headerName: "Activo",
            width: 100,
            filter: 'agMultiColumnFilter',
            cellRenderer: (params) => params.value ? "✅ Sí" : "❌ No"
        },
        { field: "fecha", headerName: "Fecha Registro", width: 130, filter: 'agMultiColumnFilter' }
    ];

    // ✅ GridOptions completamente actualizado
    const gridOptions = {
        columnDefs: columnDefs,
        detailCellRendererParams: detailCellRendererParams,
        //aggrid enable context menu
        contextMenu: true,
        masterDetail: true,
        // 1. CORREGIDO: rowSelection con la sintaxis nueva
        rowSelection: {
            mode: "multiRow",          // o "singleRow" para selección simple
            enableClickSelection: true, // ← Reemplaza a suppressRowClickSelection
            checkboxes: false
        },
        enableCellTextSelection: true,
        animateRows: true,
        // domLayout: 'autoHeight'
        // 2. CORREGIDO: stopEditingWhenCellsLoseFocus eliminado (o déjalo si lo necesitas)
        // Si lo necesitas, puedes dejarlo. La advertencia no es un error crítico.
        // stopEditingWhenCellsLoseFocus: true
    };

    const onGridReady = (params) => {
        console.log("Grid lista", params);
        params.api.sizeColumnsToFit();
    };

    const onCellClicked = (params) => {
        console.log("Celda clickeada:", params.data);
        Alert({ class: "alert-info" }, `Clicked: ${params.data.nombre}`);
    };

    const onSelectionChanged = (params) => {
        const selectedRows = params.api.getSelectedRows();
        console.log("Filas seleccionadas:", selectedRows.length);
    };

    return div([
        button({class: "btn", onclick: () => console.log(test(test()+1))}, ()=>test()),
        Grid({
            data: rowData,
            options: gridOptions,
            on: {
                onGridReady: onGridReady,
                onCellClicked: onCellClicked,
                onSelectionChanged: onSelectionChanged
            },
            class: "my-grid",
            style: "height: 800px; width: 100%;",
            dark: isDark()
        })
    ])
};