import React from "react";

const DragIndicator = ({
  draggedOver,
  draggedRegion,
  region,
  onDragEnd,
  onDragLeave,
  onDragOver,
  onDrop,
}) => {
  return (
    <>
      {["false", "true"].includes(region) ? (
        <>
          <div
            onDragEnd={onDragEnd}
            onDragLeave={onDragLeave}
            onDragOver={(e) => onDragOver(e, region)}
            onDrop={(e) => onDrop(e, region)}
            className={`${
              draggedOver && draggedRegion === region
                ? "h-[4.3438rem] max-h-[4.3438rem] min-h-[4.3438rem] w-[16.25rem] border"
                : "flex h-0 w-0 items-center justify-center border-2 "
            }
            ${
              draggedOver && draggedRegion !== region && region === "false"
                ? "left-auto right-0"
                : draggedOver && draggedRegion !== region && region === "true"
                ? "left-0 right-auto"
                : region === "false" && draggedOver
                ? "-right-[25%]"
                : region === "true" && draggedOver
                ? "-left-[25%]"
                : region === "false" && !draggedOver
                ? "left-auto right-0"
                : "left-0 right-auto"
            } 
     
            absolute inset-y-0 m-auto cursor-pointer self-center rounded-lg border-solid border-primaryBlue bg-white text-primaryBlue transition-all`}
          >
            {!draggedOver && <span>+</span>}
          </div>
        </>
      ) : region === "next" ? (
        <div className="flex h-fit w-full flex-col items-center">
          <div
            className={`next-edge-connector h-[1.5rem] max-h-[1.5rem] min-h-[1.5rem] w-0 ${
              draggedOver && draggedRegion === "next"
                ? "border border-primaryBlue"
                : "border-2 border-[#e5e7eb]"
            }`}
          ></div>
          <div
            onDragEnd={onDragEnd}
            onDragLeave={onDragLeave}
            onDragOver={(e) => onDragOver(e, region)}
            onDrop={(e) => onDrop(e, region)}
            className={`${
              draggedOver && draggedRegion === region
                ? "h-[4.3438rem] max-h-[4.3438rem] min-h-[4.3438rem] w-[16.25rem] border"
                : "flex h-0 w-0 items-center justify-center border-2"
            } relative cursor-pointer self-center rounded-lg border-solid border-primaryBlue bg-white text-primaryBlue transition-all`}
          >
            {!draggedOver && <span>+</span>}
          </div>

          <div
            className={`next-edge-connector h-[1.5rem] max-h-[1.5rem] min-h-[1.5rem] w-0  ${
              draggedOver && draggedRegion === "next"
                ? "border border-primaryBlue"
                : "border-2 border-[#e5e7eb]"
            }`}
          ></div>
        </div>
      ) : null}
    </>
  );
};

export default DragIndicator;
