import type { ColumnDef, Table } from '@tanstack/react-table';
import { Spinner } from '../../spinner';
import EditableTableCell from '../editable-table-cell';
import type { EditableTableProps } from '../types';

export interface EditableTableBodyProps<TData> {
  isLoading: boolean;
  columns: ColumnDef<TData>[];
  table: Table<TData>;
  isCellDisabled?: EditableTableProps<TData>['isCellDisabled'];
}
export default function EditableTableBody<TData>({
  isLoading,
  columns,
  table,
  isCellDisabled,
}: EditableTableBodyProps<TData>) {
  return (
    <tbody>
      {isLoading ? (
        <tr className="h-[300px]">
          <td colSpan={columns.length}>
            <div className="flex flex-col items-center justify-center gap-1">
              <Spinner className="h-8 w-8 animate-spin" />
              <p className="pt-1 text-neutral-700">Loading...</p>
            </div>
          </td>
        </tr>
      ) : table.getRowModel().rows?.length ? (
        // Normal rows
        table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => {
              return (
                <EditableTableCell
                  key={`${cell.column.getIndex()}-${cell.row.index}`}
                  cell={cell}
                  isCellDisabled={isCellDisabled}
                />
              );
            })}
          </tr>
        ))
      ) : (
        // Empty state
        <tr className="h-[300px]">
          <td colSpan={columns.length}>
            <div className="flex flex-col items-center justify-center gap-1">
              <p role="alert" aria-live="polite" className="text-neutral-700">
                No data
              </p>
            </div>
          </td>
        </tr>
      )}
    </tbody>
  );
}