import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef } from 'react';
import { ObjectSetTable } from '../../object-set-table.js';
import { mockData } from '../../mock-data.js';
import { cn } from '../../../../../scalars/lib/utils.js';
import { Button } from './button.js';
import { Form } from '../../../../../scalars/components/form/form.js';
import { NumberField } from '../../../../../scalars/components/number-field/number-field.js';
const ApiUsageExample = () => {
    const apiRef = useRef(null);
    const columns = useMemo(() => [
        { field: 'firstName', title: 'Name', sortable: true },
        {
            field: 'email',
            title: 'Email Domain',
            editable: true,
            valueFormatter: (value) => {
                if (typeof value !== 'string')
                    return value?.toString() ?? 'N/A';
                return value.toString().split('@')[1];
            },
        },
        {
            field: 'payment',
            title: 'Payment Category',
            editable: true,
            valueFormatter: (value) => {
                if (typeof value !== 'number')
                    return value?.toString() ?? 'N/A';
                if (value === 0)
                    return 'No Payment';
                if (value < 1000)
                    return 'Low';
                if (value < 100000)
                    return 'Medium';
                return 'High';
            },
            renderCell: (value) => (_jsx("span", { className: cn('px-2 py-1 rounded-full text-xs font-medium', (value === 'No Payment' || value === 'N/A') && 'bg-gray-100 text-gray-700', value === 'Low' && 'bg-yellow-100 text-yellow-700', value === 'Medium' && 'bg-blue-100 text-blue-700', value === 'High' && 'bg-green-100 text-green-700'), children: value })),
        },
        {
            field: 'address',
            title: 'Full Address',
            editable: true,
            valueFormatter: (value) => {
                const addr = value;
                return `${addr.addressLine1}, ${addr.city}, ${addr.state} ${addr.zip}`;
            },
        },
    ], []);
    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h2", { className: "text-lg font-bold mb-2", children: "Controls" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex gap-6 mb-4", children: [_jsx(Button, { variant: "primary", onClick: () => apiRef.current?.selection.selectAllRows(), children: "Select All" }), _jsx(Button, { variant: "danger", onClick: () => apiRef.current?.selection.clear(), children: "Deselect All" }), _jsx(Button, { variant: "primary", onClick: () => apiRef.current?.selection.toggleSelectAll(), children: "Toggle Select All" })] }), _jsxs("div", { className: "flex gap-6 items-center", children: [_jsxs(Form, { className: "flex gap-1 items-center", onSubmit: (data) => {
                                            apiRef.current?.selection.selectRow(data.rowIndex);
                                        }, children: [_jsx(NumberField, { className: "w-16", name: "rowIndex", minValue: 0, maxValue: mockData.length - 2 }), _jsx(Button, { variant: "primary", type: "submit", children: "Select Row" })] }), _jsxs(Form, { className: "flex gap-1 items-center", onSubmit: (data) => {
                                            apiRef.current?.selection.selectRange(data.rowIndex, data.rowIndex2);
                                        }, children: [_jsx(NumberField, { className: "w-16", name: "rowIndex", minValue: 0, maxValue: mockData.length - 2 }), _jsx(NumberField, { className: "w-16", name: "rowIndex2", minValue: 0, maxValue: mockData.length - 2 }), _jsx(Button, { variant: "primary", type: "submit", children: "Select range" })] })] }), _jsx("div", { className: "flex gap-6 items-center", children: _jsxs(Form, { className: "flex gap-1 items-center", onSubmit: (data) => {
                                        apiRef.current?.selection.selectCell(data.rowIndex, data.colIndex);
                                    }, children: [_jsx(NumberField, { className: "w-16", name: "rowIndex", minValue: 0, maxValue: mockData.length - 2 }), _jsx(NumberField, { className: "w-16", name: "colIndex", minValue: 0, maxValue: columns.length - 1 }), _jsx(Button, { variant: "primary", type: "submit", children: "Select cell" })] }) }), _jsx("div", { className: "flex gap-6 items-center", children: _jsx(Button, { variant: "primary", onClick: () => {
                                        const direction = apiRef.current?.getCurrentSortInfo()?.direction === 'asc' ? 'desc' : 'asc';
                                        apiRef.current?.sortRows(0, direction);
                                    }, children: "Sort by Name" }) })] })] }), _jsx(ObjectSetTable, { columns: columns, data: mockData, apiRef: apiRef })] }));
};
export { ApiUsageExample };
//# sourceMappingURL=api-usage.js.map