import React from 'react';
import {
    closestCenter,
    DndContext,
    KeyboardSensor,
    PointerSensor,
    useSensor,
    useSensors,
} from '@dnd-kit/core';
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import { Button } from '@theorchard/suite-components';
import VolumeContainer from 'src/components/volumeContainer';
import type { DragEndEvent, DragOverEvent } from '@dnd-kit/core';
import type { VideoProductData } from 'src/types';

interface SortableListProps {
    itemDataMap: Map<string, VideoProductData>;
    volumes: string[][];
    videoThumbnailId: string;
    audioProductLabel: string;
    handleAddVolume: () => void;
    handleRemoveVolume: (id: number) => void;
    handleDragEnd: (event: DragEndEvent) => void;
    handleDragOver: (event: DragOverEvent) => void;
    handleRemoveItem: (id: string) => void;
    handleSelectThumbnail: (id: string) => void;
}

const SortableList = (props: SortableListProps) => {
    const {
        itemDataMap,
        volumes,
        videoThumbnailId,
        audioProductLabel,
        handleAddVolume,
        handleRemoveVolume,
        handleDragEnd,
        handleDragOver,
        handleRemoveItem,
        handleSelectThumbnail,
    } = props;

    const sensors = useSensors(
        useSensor(PointerSensor),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates,
        })
    );

    return itemDataMap.size > 0 ? (
        <div className="sortable-list">
            <div className="sortable-list-header">
                <span>
                    {$t('bundles.sortableList.videoProductListLabel', {
                        numItems: itemDataMap.size,
                    })}
                </span>
                <Button
                    variant="quartenary"
                    size="sm"
                    onClick={handleAddVolume}
                >
                    {$t('bundles.sortableList.volumeButtonLabel')}
                </Button>
            </div>
            <div className="sortable-list-list">
                <DndContext
                    sensors={sensors}
                    collisionDetection={closestCenter}
                    onDragEnd={handleDragEnd}
                    onDragOver={handleDragOver}
                >
                    {volumes.map((ids, i) => (
                        <VolumeContainer
                            volume={ids}
                            volumeId={i + 1}
                            videoThumbnailId={videoThumbnailId}
                            audioProductLabel={audioProductLabel}
                            itemDataMap={itemDataMap}
                            handleRemoveVolume={handleRemoveVolume}
                            handleRemoveItem={handleRemoveItem}
                            handleSelectThumbnail={handleSelectThumbnail}
                            key={`volume-${i.toString()}`}
                        />
                    ))}
                </DndContext>
            </div>
        </div>
    ) : null;
};

export default SortableList;