import React from 'react';
import { useDroppable } from '@dnd-kit/core';
import SortableItem from 'src/components/sortableItem';
import type { VideoProductData } from 'src/types';

interface SortableContainerProps {
    itemDataMap: Map<string, VideoProductData>;
    productIds: string[];
    volumeId: number;
    videoThumbnailId: string;
    handleRemoveItem: (id: string) => void;
    handleSelectThumbnail: (id: string) => void;
}
const SortableContainer = (props: SortableContainerProps) => {
    const {
        itemDataMap,
        productIds,
        volumeId,
        videoThumbnailId,
        handleRemoveItem,
        handleSelectThumbnail,
    } = props;

    const { setNodeRef } = useDroppable({
        id: `droppable ${volumeId}`,
    });

    const sortables = productIds.map(id => (
        <SortableItem
            key={id}
            id={id}
            label={itemDataMap.get(id)?.label ?? ''}
            thumbnail={itemDataMap.get(id)?.thumbnail ?? ''}
            selectedVideoThumbnailId={videoThumbnailId}
            handleRemoveItem={() => handleRemoveItem(id)}
            handleSelectThumbnail={handleSelectThumbnail}
        />
    ));

    return <div ref={setNodeRef}>{sortables}</div>;
};

export default SortableContainer;