import * as React from "react";

import PortalComponent from "components/PortalComponent/PortalComponent";
import DragDropContext from "components/DragDropContext";
import { MusicProfileLinkItem } from "components/PreReleaseModal";

import { FormInstance } from "antd";

import PreReleaseLinkItem from "../PreReleaseLinkItem/PreReleaseLinkItem";

import classNames from "classnames";
import { ArrayServices } from "utils/array";

interface PreReleaseLinkListProps {
  className?: string;
  form?: FormInstance;
  links: MusicProfileLinkItem[];
  setMusicLinks: (links: MusicProfileLinkItem[]) => void;
}

export const PreReleaseLinkList = ({
  form,
  className,
  links,
  setMusicLinks,
}: PreReleaseLinkListProps) => {
  const setItem = (index: number) => (item: MusicProfileLinkItem) => {
    const mutatedLinks = ArrayServices.updateWithIndex(links, index, item);
    return mutatedLinks;
  };

  return (
    <DragDropContext
      droppableId="modules-drop"
      listClassName={classNames("modules-list m__t--14", className)}
      itemIdPrefix="module"
      list={links}
      onDropEndCallback={setMusicLinks}
    >
      {(dragProvided, snapshot, item, index) => (
        <PortalComponent
          innerRef={dragProvided.innerRef}
          namespaceClass="module-list"
          provided={dragProvided}
          snapshot={snapshot}
        >
          <PreReleaseLinkItem
            dragHandleProps={dragProvided.dragHandleProps}
            form={form}
            item={item}
            setItem={setItem(index)}
          />
        </PortalComponent>
      )}
    </DragDropContext>
  );
};

export default React.memo(PreReleaseLinkList);
