import { useRef } from 'preact/hooks';
import { useSortable } from '../hooks/useSortable';
import { MarkerComponent } from './marker';
import type { Marker, ReorderListParams } from './types';

type MarkersProps = {
    markers: Marker[];
    onMarkersReorder: (params: ReorderListParams) => void;
};

export const MarkersComponent = ({
    markers,
    onMarkersReorder,
}: MarkersProps) => {
    const listContainerRef = useRef<HTMLOListElement>(null);
    useSortable(listContainerRef, onMarkersReorder);

    return (
        <ol ref={listContainerRef}>
            {markers.map((marker, i) => (
                <MarkerComponent
                    key={marker.key}
                    marker={marker}
                    isFirst={i === 0}
                    isLast={i === markers.length - 1}
                />
            ))}
        </ol>
    );
};
