import { HTML5toTouch } from 'rdndmb-html5-to-touch';
import { DndProvider } from 'react-dnd';
import { MultiBackend } from 'react-dnd-multi-backend';

import { DraggableItem } from '@/components/drag-and-drop/components/DraggableItem';
import { List } from '@/components/drag-and-drop/components/List';
import { IDragAndDropProps } from '@/components/drag-and-drop/types';

export type TDragAndDropListProps = IDragAndDropProps & {
  moveCard: (dragIndex: number, hoverIndex: number) => void;
  onDragEnd?: (dragIndex: number, hoverIndex: number) => void;
};

export function DragAndDropList({
  initialItems,
  className,
  moveCard,
  onDragEnd,
}: TDragAndDropListProps): React.ReactElement {
  return (
    <DndProvider backend={MultiBackend} options={HTML5toTouch}>
      <List className={className} onDragEnd={onDragEnd}>
        {initialItems.map((item, index) => (
          <DraggableItem key={item.id} id={item.id} index={index} moveCard={moveCard}>
            {item.content}
          </DraggableItem>
        ))}
      </List>
    </DndProvider>
  );
}