import { ReactElement, useState } from 'react';

import { HTML5toTouch } from 'rdndmb-html5-to-touch';
import { DndProvider } from 'react-dnd';
import { MultiBackend } from 'react-dnd-multi-backend';

import { IDraggableItem } from '@/components';
import { Column } from '@/components/drag-and-drop/components/Column';
import { DraggableItem } from '@/components/drag-and-drop/components/DraggableItem';
import { IDragAndDropProps } from '@/components/drag-and-drop/types/IDragAndDropProps';

export function DragAndDropColumns({ initialItems }: IDragAndDropProps): ReactElement {
  const [columnInList, setColumnInList] = useState<IDraggableItem[]>([]);

  const handleDropIn = (item: { id: number; index: number }) => {
    const isIn = columnInList.find(it => item.id === it.id);

    if (!isIn) {
      const movedItem = initialItems.find(it => item.id === it.id);

      if (movedItem) {
        setColumnInList([...columnInList, movedItem]);
      }
    }
  };

  const handleDropOut = (item: { id: number; index: number }) => {
    setColumnInList(columnInList.filter(it => it.id !== item.id));
  };

  return (
    <DndProvider backend={MultiBackend} options={HTML5toTouch}>
      <Column
        isTarget
        onDropped={item => handleDropIn(item)}
        className="max-w-[430px] border border-solid border-gray min-h-[52px] w-full rounded-[3px] mb-2 px-2 flex"
      >
        {columnInList.map((item, index) => (
          <DraggableItem key={item.id} id={item.id} index={index}>
            {item.content}
          </DraggableItem>
        ))}
      </Column>
      <Column onDropped={item => handleDropOut(item)} className="max-w-[430px] min-h-[52px] bg-blue-ui/5 flex">
        {initialItems.map((item, index) => (
          <DraggableItem key={item.id} id={item.id} index={index}>
            {item.content}
          </DraggableItem>
        ))}
      </Column>
    </DndProvider>
  );
}