import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { cn } from '../../../scalars/lib/utils.js';
import { mockData } from '../../table/mock-data.js';
import { ObjectSetTable } from '../../table/object-set-table.js';
import { buildStringCellEditor } from '../../components/default-cell-editors/string-editor.js';
const CustomTextInputEditor = ({ value, onChange, context, placeholder, maxLength, }) => {
    const { register } = useFormContext();
    const inputValue = typeof value === 'string' ? value : (value?.toString() ?? '');
    return (_jsx("input", { ...register(context.column.field, {
            value: inputValue,
            onChange,
            validate: (value) => {
                if (typeof value === 'string' && value.length > 10) {
                    return 'Custom validation: Value must be less than 10 characters';
                }
                return true;
            },
        }), type: "text", placeholder: placeholder, maxLength: maxLength, autoFocus: true, className: cn('w-full px-2 py-1 text-sm border border-gray-300 rounded-md', 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent', 'bg-white text-gray-900 placeholder-gray-500') }));
};
CustomTextInputEditor.displayName = 'CustomTextInputEditor';
const CustomEmailInputEditor = ({ value, onChange, context, }) => {
    const { register } = useFormContext();
    const emailValue = typeof value === 'string' ? value : (value?.toString() ?? '');
    return (_jsx("input", { ...register(context.column.field, {
            value: emailValue,
            onChange,
            pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                message: 'Invalid email address',
            },
        }), type: "email", placeholder: "Enter email address...", autoFocus: true, className: cn('w-full px-2 py-1 text-sm border border-gray-300 rounded-md', 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent', 'bg-white text-gray-900 placeholder-gray-500', 'invalid:border-red-500 invalid:ring-red-500') }));
};
CustomEmailInputEditor.displayName = 'CustomEmailInputEditor';
// The Editors can be created using the CellEditor signature directly, but creating builders for them gives you the
// flexibility to reuse them with different parameters.
const buildCustomHTMLInputEditor = (placeholder, maxLength) => {
    const editor = (value, onChange, context) => {
        return (_jsx(CustomTextInputEditor, { value: value, onChange: onChange, context: context, placeholder: placeholder, maxLength: maxLength }));
    };
    editor.displayName = 'CustomHTMLInputEditor';
    return editor;
};
const buildCustomEmailEditor = () => {
    const editor = (value, onChange, context) => {
        return _jsx(CustomEmailInputEditor, { value: value, onChange: onChange, context: context });
    };
    editor.displayName = 'CustomEmailEditor';
    return editor;
};
const CustomCellEditorsExample = (props) => {
    const [data, setData] = useState(mockData);
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'First Name',
            editable: true,
            width: 160,
            onSave: (value, context) => {
                if (typeof value === 'string' && value.trim().length > 0) {
                    setData((prevData) => {
                        const newData = [...prevData];
                        newData[context.rowIndex].firstName = value.trim();
                        return newData;
                    });
                    return true;
                }
                return false;
            },
            // Using custom HTML input editor instead of built-in StringField
            renderCellEditor: buildCustomHTMLInputEditor('Enter first name...', 50),
        },
        {
            field: 'email',
            title: 'Email',
            editable: true,
            width: 200,
            type: 'email',
            onSave: (value, context) => {
                if (typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                    setData((prevData) => {
                        const newData = [...prevData];
                        newData[context.rowIndex].email = value;
                        return newData;
                    });
                    return true;
                }
                return false;
            },
            // Using custom email input with validation
            renderCellEditor: buildCustomEmailEditor(),
        },
        {
            field: 'walletAddress',
            title: 'Wallet Address',
            editable: true,
            width: 200,
            onSave: (value, context) => {
                if (typeof value === 'string' && value.trim().length > 0) {
                    setData((prevData) => {
                        const newData = [...prevData];
                        newData[context.rowIndex].walletAddress = value.trim();
                        return newData;
                    });
                    return true;
                }
                return false;
            },
            // Mixed: Using built-in scalar editor for comparison
            renderCellEditor: buildStringCellEditor({
                placeholder: 'Enter wallet address...',
                className: 'font-mono text-xs',
            }),
        },
        {
            field: 'payment',
            title: 'Payment',
            width: 120,
            type: 'number',
            editable: true,
            align: 'right',
            onSave: (value, context) => {
                const numValue = Number(value);
                if (!isNaN(numValue) && numValue >= 0) {
                    setData((prevData) => {
                        const newData = [...prevData];
                        newData[context.rowIndex].payment = numValue;
                        return newData;
                    });
                    return true;
                }
                return false;
            },
            renderCell: (value) => {
                return value !== undefined ? _jsxs("span", { className: "font-mono", children: ["$", value.toLocaleString()] }) : null;
            },
            // Using built-in number editor for simplicity
            renderCellEditor: buildStringCellEditor({
                placeholder: 'Enter amount...',
                className: 'text-right font-mono',
            }),
        },
    ], []);
    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [_jsx("h3", { className: "font-semibold text-blue-900 mb-2", children: "Custom Cell Editors Example" }), _jsx("p", { className: "text-blue-800 text-sm", children: "This example demonstrates custom cell editors using HTML inputs with react-hook-form's register() function. Compare the custom HTML inputs (First Name, Email) with the built-in scalar editor (Wallet Address)." })] }), _jsx(ObjectSetTable, { columns: columns, data: data, minRowCount: 5, maxRowCount: 10, ...props, onDelete: (rows) => {
                    setData((prevData) => {
                        const newData = [...prevData];
                        const filteredData = newData.filter((row) => !rows.some((person) => person.id === row.id));
                        return filteredData;
                    });
                }, onAdd: (data) => {
                    const newPerson = {
                        id: crypto.randomUUID(),
                        firstName: '',
                        status: 'inactive',
                        payment: 0,
                        isActive: false,
                        walletAddress: '',
                        email: '',
                        address: {
                            country: '',
                            addressLine1: '',
                            addressLine2: '',
                            city: '',
                            state: '',
                            zip: '',
                        },
                        ...data,
                    };
                    setData((prevData) => [...prevData, newPerson]);
                } })] }));
};
export default CustomCellEditorsExample;
//# sourceMappingURL=custom-cell-editors.js.map