import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { cn } from '../../../scalars/index.js';
import { mockData } from '../../table/mock-data.js';
import { ObjectSetTable } from '../../table/object-set-table.js';
import { Icon } from '../../../ui/components/icon/icon.js';
const RowReorderingExample = (props) => {
    const [data, setData] = useState(mockData.slice(0, 6)); // Use fewer rows for better demo
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'Name',
            width: 140,
            renderCell: (value) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "Person", size: 16, className: "text-gray-500" }), _jsx("span", { className: "font-medium", children: value })] })),
        },
        {
            field: 'email',
            width: 200,
            renderCell: (value) => _jsx("span", { className: "text-gray-600", children: value }),
        },
        {
            field: 'status',
            width: 120,
            renderCell: (value) => (_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('text-xs font-medium', value === 'active' ? 'text-green-700' : 'text-red-700'), children: value.charAt(0).toUpperCase() + value.slice(1) })] })),
        },
        {
            field: 'payment',
            width: 120,
            type: 'number',
        },
    ], []);
    /**
     * Reorder the rows in the table.
     *
     * @param rows - The rows part of the `data` array to reorder.
     * @param targetRowIndex - The index (0-based) to reorder the rows to, this index is relative to the original array.
     *
     * @example
     * ```
     * data = [1,2,3,4,5]
     * handleReorder([1,2], 3)
     * data = [4,3,1,2,5]
     * ```
     */
    const handleReorder = (rows, targetRowIndex) => {
        setData((prevData) => {
            const left = [];
            const right = [];
            prevData.forEach((row, index) => {
                if (!rows.some((incomingRow) => incomingRow.id === row.id)) {
                    if (index <= targetRowIndex) {
                        left.push(row);
                    }
                    else {
                        right.push(row);
                    }
                }
            });
            return [...left, ...rows, ...right];
        });
    };
    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-md", children: [_jsx("h3", { className: "text-sm font-medium text-blue-900 mb-2", children: "Row Reordering Demo" }), _jsx("p", { className: "text-sm text-blue-700", children: "Drag and drop rows to reorder them. The table data will update automatically." })] }), _jsx(ObjectSetTable, { columns: columns, data: data, onReorder: handleReorder, allowRowSelection: true, showRowNumbers: true, minRowCount: 10, ...props })] }));
};
export default RowReorderingExample;
//# sourceMappingURL=row-reordering.js.map