import { flexRender } from '@tanstack/solid-table';
import {
  createSortable,
  useDragDropContext,
  transformStyle,
} from '@thisbeyond/solid-dnd';

// Row Component shown when row is dragged
const DraggableRow = ({ row, className }: { row: any; className?: string }) => {
  const sortable = createSortable(row.original.id);
  const context = useDragDropContext();
  const state = context && context[0];

  return (
    <tr
      ref={sortable.ref}
      class={className}
      style={transformStyle(sortable.transform)}
      classList={{
        'opacity-25': sortable.isActiveDraggable,
        'transition-transform': !!state?.active.overlay,
      }}
    >
      {row.getVisibleCells().map((cell: any, idx: number) =>
        cell.column.id == 'drag-handle' ? ( // Only the Drag handle should allow the row to be dragged.
          <td
            {...sortable.dragActivators}
            class="border border-border"
            style={{ height: '1px', width: cell.column.getSize() + 'px' }}
          >
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>
        ) : (
          <td
            class="border border-border"
            style={{ height: '1px', width: cell.column.getSize() + 'px' }}
          >
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>
        )
      )}
    </tr>
  );
};
export default DraggableRow;