// import DragItem from '@components/DragItem/DragItem';
import DragDropIcon from "@components/aisera-icons/DragDropIcon";
import { TrashDeleteIcon } from "@components/aisera-icons/custom";
import React, { DragEvent, useEffect, useState } from "react";
import "./dragContainer.scss";

export interface DragContainerProps {
  isDeletable: boolean;
  children: React.ReactNode[];
  onChangeList: (sortedList: React.ReactNode[]) => void;
}

export const DragContainer = ({
  isDeletable,
  children,
  onChangeList,
}: DragContainerProps) => {
  const [items, setItems] = useState<React.ReactNode[]>([]);

  useEffect(() => {
    setItems(React.Children.toArray(children));
  }, [children]);

  const [draggedItem, setDraggedItem] = useState<React.ReactNode | null>(null);
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
  const [originalIndex, setOriginalIndex] = useState<number | null>(null);

  const handleDragStart = (e: DragEvent<HTMLDivElement>, index: number) => {
    const dragged = items[index] as React.ReactNode;
    if (dragged) {
      setDraggedItem(dragged);
      setDraggedIndex(index);
      setOriginalIndex(index);
    }
  };

  const handleDragOver = (e: DragEvent<HTMLDivElement>, index: number) => {
    e.preventDefault();
    if (draggedItem && draggedOverIndex !== index) {
      const updatedItems = [...items];
      updatedItems.splice(draggedIndex!, 1);
      updatedItems.splice(index, 0, draggedItem);
      setItems(updatedItems);
      setDraggedIndex(index);
      setDraggedOverIndex(index);
      onChangeList(updatedItems);
    }
  };

  const handleDelete = (e: any, index: number) => {
    const updatedItems = [...items];
    updatedItems.splice(index!, 1);
    setItems(updatedItems);
    onChangeList(updatedItems);
  };

  const handleDragEnd = () => {
    setDraggedItem(null);
    setDraggedIndex(null);
    setDraggedOverIndex(null);
  };

  return (
    <div className="drag-container">
      {items.map((children, index) => (
        <div
          draggable
          onDragStart={(e) => handleDragStart(e, index)}
          onDragOver={(e) => handleDragOver(e, index)}
          onDragEnd={handleDragEnd}
        >
          <div
            className={`drag-drop drag-item-center 
                    ${draggedItem !== null &&
                draggedIndex !== null &&
                draggedIndex === index
                ? "dragged-item"
                : ""
              } 
                    ${draggedIndex !== null && draggedIndex === index - 1
                ? "dragged-over-top"
                : ""
              }
                     ${draggedIndex !== null && draggedIndex === index + 1
                ? "dragged-over-bottom"
                : ""
              }`}
          >
            <div className="drag-item-center">
              <DragDropIcon />
            </div>
            <div className="control">{children}</div>
            {isDeletable && (
              <div
                className="delete-item drag-item-center "
                onClick={(e) => handleDelete(e, index)}
              >
                <TrashDeleteIcon />
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default DragContainer;