import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from 'react';
import { ObjectSetTable } from '../../table/object-set-table.js';
import { mockData } from '../../table/mock-data.js';
import { cn } from '../../../scalars/lib/utils.js';
import { EventLogCard } from './event-log-card.js';
const EventsExample = () => {
    const apiRef = useRef(null);
    const [eventLogs, setEventLogs] = useState([]);
    const [data, setData] = useState(mockData);
    const addEventLog = (type, details, data) => {
        const newEvent = {
            id: Date.now().toString(),
            timestamp: new Date().toLocaleTimeString(),
            type,
            details,
            data,
        };
        setEventLogs((prev) => [newEvent, ...prev]);
    };
    const clearEventLogs = () => {
        setEventLogs([]);
    };
    useEffect(() => {
        const api = apiRef.current;
        if (!api)
            return;
        const handleEditingStart = ((event) => {
            const { columnDef, isAddingRow } = event.detail;
            addEventLog('editing:start', `Started editing ${columnDef.field} at row ${event.detail.cell.row}, column ${event.detail.cell.column}${isAddingRow ? ' (new row)' : ''}`, event.detail);
        });
        const handleEditingSave = ((event) => {
            const { columnDef, oldValue, newValue, isAddingRow } = event.detail;
            addEventLog('editing:save', `Saved ${columnDef.field}: ${String(oldValue)} → ${String(newValue)}${isAddingRow ? ' (new row)' : ''}`, event.detail);
        });
        const handleEditingExit = ((event) => {
            const { columnDef, saved } = event.detail;
            addEventLog('editing:exit', `Exited editing ${columnDef.field} (${saved ? 'saved' : 'cancelled'})`, event.detail);
        });
        const handleValidationError = ((event) => {
            const { columnDef, errors } = event.detail;
            addEventLog('editing:validationError', `Validation failed for ${columnDef.field}: ${errors.join(', ')}`, event.detail);
        });
        const handleValidationSuccess = ((event) => {
            const { columnDef } = event.detail;
            addEventLog('editing:validationSuccess', `Validation passed for ${columnDef.field}`, event.detail);
        });
        const handleValidationErrorChange = ((event) => {
            const { columnDef, previousErrors, currentErrors } = event.detail;
            const hasErrors = currentErrors.length > 0;
            const hadErrors = previousErrors.length > 0;
            let details = '';
            if (!hadErrors && hasErrors) {
                details = `Validation errors appeared for ${columnDef.field}: ${currentErrors.join(', ')}`;
            }
            else if (hadErrors && !hasErrors) {
                details = `Validation errors cleared for ${columnDef.field}`;
            }
            else if (hadErrors && hasErrors) {
                details = `Validation errors changed for ${columnDef.field}: ${currentErrors.join(', ')}`;
            }
            addEventLog('editing:validationErrorChange', details, event.detail);
        });
        // Delete event handlers
        const handleDeleteStart = ((event) => {
            const { rowCount, requiresConfirmation } = event.detail;
            addEventLog('delete:start', `Starting deletion of ${rowCount} row(s)${requiresConfirmation ? ' (confirmation required)' : ''}`, event.detail);
        });
        const handleDeleteConfirm = ((event) => {
            const { rowCount, confirmationDetails } = event.detail;
            const details = confirmationDetails
                ? `User confirmed deletion of ${rowCount} row(s) - "${confirmationDetails.title}"`
                : `User confirmed deletion of ${rowCount} row(s)`;
            addEventLog('delete:confirm', details, event.detail);
        });
        const handleDeleteSuccess = ((event) => {
            const { rowCount, remainingRowCount } = event.detail;
            addEventLog('delete:success', `Successfully deleted ${rowCount} row(s). ${remainingRowCount} rows remaining.`, event.detail);
        });
        const handleDeleteCancel = ((event) => {
            const { rowCount, reason } = event.detail;
            const reasonText = {
                user_cancelled: 'User cancelled',
                validation_failed: 'Validation failed',
                permission_denied: 'Permission denied',
            }[reason];
            addEventLog('delete:cancel', `Deletion cancelled: ${reasonText} (${rowCount} row(s))`, event.detail);
        });
        const handleDeleteError = ((event) => {
            const { rowCount, error } = event.detail;
            addEventLog('delete:error', `Deletion failed for ${rowCount} row(s): ${error.message}`, event.detail);
        });
        // Insert event handlers
        const handleInsertStart = ((event) => {
            const { field, currentRowCount } = event.detail;
            addEventLog('insert:start', `Starting to add new row via ${field} field (${currentRowCount} rows currently)`, event.detail);
        });
        const handleInsertSuccess = ((event) => {
            const { insertedData, field, newRowCount, insertedRowIndex } = event.detail;
            addEventLog('insert:success', `New row added via ${field}: ${JSON.stringify(insertedData)} (${newRowCount} rows total, inserted at index ${insertedRowIndex})`, event.detail);
        });
        const handleInsertCancel = ((event) => {
            const { field, cancelledValue, reason } = event.detail;
            const reasonText = {
                user_cancelled: 'User cancelled',
                empty_value: 'Empty value',
                validation_failed: 'Validation failed',
            }[reason];
            addEventLog('insert:cancel', `Insertion cancelled for ${field}: ${reasonText} (value: ${String(cancelledValue)})`, event.detail);
        });
        // Sort event handlers
        const handleSortChange = ((event) => {
            const { columnDef, previousDirection, newDirection, previousColumnIndex } = event.detail;
            const directionText = (dir) => {
                switch (dir) {
                    case 'asc':
                        return 'ascending';
                    case 'desc':
                        return 'descending';
                    case null:
                        return 'none';
                    default:
                        return 'none';
                }
            };
            let details = `Sort changed for column "${columnDef.field}"`;
            if (previousColumnIndex !== null && previousColumnIndex !== event.detail.columnIndex) {
                details += ` (switched from column ${previousColumnIndex})`;
            }
            details += `: ${directionText(previousDirection)} → ${directionText(newDirection)}`;
            addEventLog('sort:change', details, event.detail);
        });
        const handleSortClear = ((event) => {
            const { columnDef, previousSortState } = event.detail;
            const directionText = previousSortState.direction === 'asc' ? 'ascending' : 'descending';
            addEventLog('sort:clear', `Sort cleared for column "${columnDef.field}" (was ${directionText})`, event.detail);
        });
        const tableElement = api.getHTMLTable();
        tableElement.addEventListener('table:editing:start', handleEditingStart);
        tableElement.addEventListener('table:editing:save', handleEditingSave);
        tableElement.addEventListener('table:editing:exit', handleEditingExit);
        tableElement.addEventListener('table:editing:validationError', handleValidationError);
        tableElement.addEventListener('table:editing:validationSuccess', handleValidationSuccess);
        tableElement.addEventListener('table:editing:validationErrorChange', handleValidationErrorChange);
        tableElement.addEventListener('table:insert:start', handleInsertStart);
        tableElement.addEventListener('table:insert:success', handleInsertSuccess);
        tableElement.addEventListener('table:insert:cancel', handleInsertCancel);
        tableElement.addEventListener('table:delete:start', handleDeleteStart);
        tableElement.addEventListener('table:delete:confirm', handleDeleteConfirm);
        tableElement.addEventListener('table:delete:success', handleDeleteSuccess);
        tableElement.addEventListener('table:delete:cancel', handleDeleteCancel);
        tableElement.addEventListener('table:delete:error', handleDeleteError);
        tableElement.addEventListener('table:sort:change', handleSortChange);
        tableElement.addEventListener('table:sort:clear', handleSortClear);
        return () => {
            // Cleanup event listeners
            tableElement.removeEventListener('table:editing:start', handleEditingStart);
            tableElement.removeEventListener('table:editing:save', handleEditingSave);
            tableElement.removeEventListener('table:editing:exit', handleEditingExit);
            tableElement.removeEventListener('table:editing:validationError', handleValidationError);
            tableElement.removeEventListener('table:editing:validationSuccess', handleValidationSuccess);
            tableElement.removeEventListener('table:editing:validationErrorChange', handleValidationErrorChange);
            tableElement.removeEventListener('table:insert:start', handleInsertStart);
            tableElement.removeEventListener('table:insert:success', handleInsertSuccess);
            tableElement.removeEventListener('table:insert:cancel', handleInsertCancel);
            tableElement.removeEventListener('table:delete:start', handleDeleteStart);
            tableElement.removeEventListener('table:delete:confirm', handleDeleteConfirm);
            tableElement.removeEventListener('table:delete:success', handleDeleteSuccess);
            tableElement.removeEventListener('table:delete:cancel', handleDeleteCancel);
            tableElement.removeEventListener('table:delete:error', handleDeleteError);
            tableElement.removeEventListener('table:sort:change', handleSortChange);
            tableElement.removeEventListener('table:sort:clear', handleSortClear);
        };
    }, []);
    const handleAdd = (newRowData) => {
        // Simulate adding the new row to the data
        const newRow = {
            id: Math.random().toString(),
            firstName: newRowData.firstName || 'New Person',
            walletAddress: newRowData.walletAddress || '0x0000000000000000',
            isActive: newRowData.isActive || true,
            payment: newRowData.payment || 0,
            email: newRowData.email || 'new@example.com',
            status: 'active',
            address: {
                country: 'US',
                addressLine1: '',
                addressLine2: '',
                city: 'New City',
                state: 'NY',
                zip: '00000',
            },
        };
        setData((prev) => [...prev, newRow]);
    };
    const handleDelete = (rows) => {
        // Remove the deleted rows from the data
        const deletedIds = rows.map((row) => row.id);
        setData((prev) => prev.filter((row) => !deletedIds.includes(row.id)));
    };
    const handleCellSave = (fieldName) => (value, context) => {
        setData((prevData) => {
            const newData = [...prevData];
            newData[context.rowIndex][fieldName] = value;
            return newData;
        });
        return true;
    };
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'Name',
            sortable: true,
            editable: true,
            onSave: handleCellSave('firstName'),
        },
        {
            field: 'email',
            title: 'Email',
            editable: true,
            onSave: handleCellSave('email'),
        },
        {
            field: 'payment',
            title: 'Payment',
            type: 'currency',
            sortable: true,
            editable: true,
            onSave: handleCellSave('payment'),
        },
        {
            field: 'isActive',
            title: 'Active',
            type: 'boolean',
            editable: true,
            onSave: handleCellSave('isActive'),
        },
        {
            field: 'status',
            title: 'Status',
            sortable: true,
            editable: true,
            onSave: handleCellSave('status'),
            renderCell: (value) => (_jsx("span", { className: cn('px-2 py-1 rounded-full text-xs font-medium', value === 'active' && 'bg-green-100 text-green-700', value === 'inactive' && 'bg-red-100 text-red-700'), children: value })),
        },
    ], []);
    const actions = useMemo(() => ({
        primary: {
            label: 'Edit',
            callback: () => undefined,
            icon: _jsx("span", { children: "\u270F\uFE0F" }),
        },
        secondary: [
            {
                label: 'View Details',
                callback: () => undefined,
            },
            {
                label: 'Duplicate',
                callback: () => undefined,
            },
        ],
    }), []);
    return (_jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h2", { className: "text-lg font-bold mb-4", children: "Object Set Table with Event Logging" }), _jsx(ObjectSetTable, { columns: columns, data: data, apiRef: apiRef, onAdd: handleAdd, onDelete: handleDelete, 
                        //   onReorder={handleReorder}
                        actions: actions })] }), _jsx(EventLogCard, { eventLogs: eventLogs, clearEventLogs: clearEventLogs })] }));
};
export { EventsExample };
//# sourceMappingURL=events.js.map