import { type ReactNode } from 'react';

import { type LibrariesTreeItem } from '@composed-components/LibrariesSidebar/types';
import { SortableListComposition as SortableList } from '@composed-components/SortableListComposition';
import { type DragEvent } from '@composed-components/SortableListComposition/types';
import { type SxProps, type Theme } from '@mui/material/styles';

type SortableRowsProps = {
  items: LibrariesTreeItem[];
  onDragEnd: (event: DragEvent) => void;
  renderRow: (item: LibrariesTreeItem) => ReactNode;
  sx?: SxProps<Theme>;
};

export const SortableRows = ({
  items,
  onDragEnd,
  renderRow,
  sx,
}: SortableRowsProps) => (
  <SortableList.Root
    onDragEnd={onDragEnd}
    restrictToAncestor
    direction="vertical"
    hasDragOverlay
    dragActivationDistance={0}
    sx={sx}
  >
    {items.map(item => (
      <SortableList.Item
        key={item.id}
        id={item.id}
      >
        {renderRow(item)}
      </SortableList.Item>
    ))}
  </SortableList.Root>
);
