import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { cn, EnumField } from '../../../../../scalars/index.js';
import { mockData } from '../../mock-data.js';
import { ObjectSetTable } from '../../object-set-table.js';
import { Icon } from '../../../icon/icon.js';
import { confirm } from '../../../confirm/confirm.js';
const TableEditingExample = (props) => {
    const [data, setData] = useState(mockData);
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'User',
            editable: true,
            sortable: true,
            width: 140,
            onSave: (value, context) => {
                setData((prevData) => {
                    const newData = [...prevData];
                    newData[context.rowIndex].firstName = value;
                    return newData;
                });
                return true;
            },
        },
        {
            field: 'status',
            width: 130,
            editable: true,
            onSave: (value, context) => {
                setData((prevData) => {
                    const newData = [...prevData];
                    newData[context.rowIndex].status = value;
                    return newData;
                });
                return true;
            },
            renderCell: (value) => !value ? null : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('h-2 w-2 rounded-full', value === 'active' ? 'bg-green-500' : 'bg-red-500') }), _jsx("span", { className: cn('font-medium', value === 'active' ? 'text-green-700' : 'text-red-700'), children: value.charAt(0).toUpperCase() + value.slice(1) })] })),
            renderCellEditor: (value, onChange, context) => {
                return (_jsx("div", { children: _jsx(EnumField, { name: context.column.field, autoFocus: true, options: [
                            { value: 'active', label: 'Active' },
                            { value: 'inactive', label: 'Inactive' },
                        ], variant: "Select", value: String(value), onChange: (value) => {
                            onChange(value);
                        } }) }));
            },
        },
        {
            field: 'payment',
            width: 140,
            type: 'number',
            editable: true,
            onSave: (value, context) => {
                setData((prevData) => {
                    const newData = [...prevData];
                    newData[context.rowIndex].payment = value;
                    return newData;
                });
                return true;
            },
            renderCell: (value) => !value ? null : (_jsxs("div", { className: "flex items-center justify-end", children: [_jsxs("span", { className: "font-semibold text-gray-900", children: ["$", value] }), Number(value) > 1000000 ? (_jsx(Icon, { name: "ArrowUp", size: 16, className: "ml-1 text-green-500" })) : (_jsx(Icon, { name: "ArrowUp", size: 16, className: "ml-1 text-red-500 rotate-180" }))] })),
            sortable: true,
        },
        {
            field: 'isActive',
            width: 80,
            title: 'Active',
            type: 'boolean',
            editable: true,
            align: 'center',
            onSave: (value, context) => {
                setData((prevData) => {
                    const newData = [...prevData];
                    newData[context.rowIndex].isActive = value;
                    return newData;
                });
                return true;
            },
            renderCell: (value, context) => !value ? null : (_jsx("div", { className: cn({
                    'justify-end': context.column.align === 'right',
                    'justify-center': context.column.align === 'center',
                    'justify-start': context.column.align === 'left' || !context.column.align,
                }, 'flex w-full'), children: value === 'true' ? (_jsx(Icon, { name: "CheckCircle", size: 20, className: "text-green-500" })) : (_jsx(Icon, { name: "CrossCircle", size: 20, className: "text-red-500" })) })),
        },
    ], []);
    const actions = useMemo(() => {
        return {
            primary: {
                label: 'Edit',
                icon: _jsx(Icon, { name: "DownloadFile", size: 16 }),
                callback: async (context) => {
                    if (await confirm({
                        title: `Print ${context.row.firstName} data?`,
                        description: 'This will log the context to console.',
                    })) {
                        // this is just for example purposes
                        // eslint-disable-next-line no-console
                        console.log(context);
                    }
                },
            },
            secondary: [
                {
                    label: 'Action 1',
                    callback: () => {
                        // this is just for example purposes
                        // eslint-disable-next-line no-alert
                        alert('You clicked the action 1 button');
                    },
                },
                {
                    label: 'Action 2',
                    callback: () => {
                        // this is just for example purposes
                        // eslint-disable-next-line no-alert
                        alert('You clicked the action 2 button');
                    },
                },
            ],
        };
    }, []);
    return (_jsx(ObjectSetTable, { columns: columns, data: data, minRowCount: 10, actions: actions, ...props, onDelete: (rows) => {
            setData((prevData) => {
                const newData = [...prevData];
                const filteredData = newData.filter((row) => !rows.some((person) => person.email === row.email));
                return filteredData;
            });
        }, onAdd: (data) => {
            const newPerson = {
                firstName: '',
                status: 'inactive',
                payment: 0,
                isActive: false,
                walletAddress: '',
                email: '',
                address: {
                    addressLine1: '',
                    addressLine2: '',
                    city: '',
                    state: '',
                    zip: '',
                },
                ...data,
            };
            setData((prevData) => [...prevData, newPerson]);
        } }));
};
export default TableEditingExample;
//# sourceMappingURL=table-editing.js.map