'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { observer } from 'mobx-react-lite';

import SongRow, { SongRowProps } from '@/components/song/SongRow';

interface PlaylistSongRowProps extends SongRowProps {
  id: string;
  isDraggable?: boolean;
  transformedIndexes?: { [id: number]: boolean };
  transformCorrectPixels?: number;
  onTransformChange?: (change: { [id: number]: boolean }) => void;
  isContestPlaylist?: boolean;
  style?: object;
  showTopTrackIcon?: boolean;
}

const PlaylistSongRow = observer(
  ({
    id,
    isDraggable,
    isContestPlaylist,
    onTransformChange,
    ...rest
  }: PlaylistSongRowProps) => {
    const { attributes, listeners, setNodeRef, transform, transition } =
      useSortable({ id });

    const style = {
      transform: CSS.Transform.toString(transform),
      transition,
    };

    return isDraggable ? (
      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
        <SongRow
          showUser
          {...rest}
          isContestClip={isContestPlaylist}
          style={style}
        />
      </div>
    ) : (
      <SongRow
        showUser
        {...rest}
        isContestClip={isContestPlaylist}
        style={style}
      />
    );
  }
);

export default PlaylistSongRow;