import { CSS } from "@dnd-kit/utilities";
import { useSortable } from "@dnd-kit/sortable";
import { MdDragIndicator } from "react-icons/md";
import { useSelector } from "react-redux";
import { RootState } from "../../../store/store";

const SortableRecipient = ({ recipient, idx, editRecipientCurrentEmail, children }: any) => {

  const selectedRecipientsLen = useSelector((state: RootState) => state.selectedRecipients.recipients.length);
  const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: recipient.id || recipient.uuid });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.6 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`relative flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-0 my-3 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail ? "bg-neutral-100 opacity-40" : ""}
        ${isDragging ? "bg-blue-50 shadow-lg" : ""}
      `}
    >
      {/* Drag handle only on left side */}
      {selectedRecipientsLen && <div
        {...attributes}
        {...listeners}
        className="cursor-grab text-gray-500 flex items-center pr-2 absolute top-0 left-0 z-10 h-full"
      >

        {signingOrder && <MdDragIndicator className="absolute top-[50%] left-[70px] transform -translate-y-1/2 text-gray-300" />}

      </div>}

      {/* Your card content */}
      <div className="flex-1">{children}</div>
    </div>
  );
}

export default SortableRecipient;