import React, { useRef, useState } from "react";
import { LazyLoad } from "@/components/LazyLoad";
import { RouteConfigModal } from "./RouteConfigModal";
import { APIRouteConfigTabs } from "@/utils/constants";

const RouteConfiguration = ({
  totalFlow,
  setWorkflowData,
  workflow,
  updateWorkflow,
  updateRouteConfig,
}) => {
  const [open, setOpen] = useState(false);
  const [draggedOver, setDraggedOver] = useState(false);
  const [hovered, setHovered] = useState(false);

  const containerRef = useRef(null);

  const onToggleModal = (value) => {
    setOpen(value);
  };

  const onDrop = (e) => {
    e.preventDefault();
    setWorkflowData(workflow?.id);
    setDraggedOver(false);
  };
  const onDragOver = (e) => {
    e.preventDefault();
    if (!draggedOver) {
      setDraggedOver(true);
    }
  };
  const handleMouseEnter = (e) => {
    e.preventDefault();

    if (!hovered) {
      setHovered(true);
    }
  };

  const handleMouseLeave = (e) => {
    e.preventDefault();

    setHovered(false);
  };

  const onDragLeave = (e) => {
    e.preventDefault();
    if (!hovered) {
      setDraggedOver(false);
    }
  };
  const onDragEnd = (e) => {
    e.preventDefault();
    if (!hovered) {
      setDraggedOver(false);
    }
  };
  return (
    <div
      onMouseEnter={(e) => handleMouseEnter(e)}
      onMouseLeave={(e) => handleMouseLeave(e)}
      className={`relative flex h-fit max-h-fit min-h-fit w-fit select-none flex-col`}
    >
      <div
        ref={containerRef}
        onDragLeave={onDragLeave}
        onDragOver={onDragOver}
        onDragEnd={onDragEnd}
        onDrop={onDrop}
        className="group relative h-[4.3438rem] max-h-[4.3438rem] min-h-[4.3438rem] w-[16.25rem] select-none "
      >
        <div
          onClick={() => onToggleModal(true)}
          className="relative flex h-[4.3438rem] max-h-[4.3438rem] min-h-[4.3438rem] w-[16.25rem] cursor-pointer flex-col gap-1 rounded-lg border border-solid border-primaryBlue bg-white p-5 px-3 py-2 shadow-md shadow-primaryBlue transition ease-in-out"
        >
          <div className={"flex gap-3"}>
            <span className=" h-5 max-h-5 rounded-md bg-primaryBlue px-2 py-1 text-[.725rem] leading-snug tracking-widest text-white">
              {workflow?.configurations[APIRouteConfigTabs.General]?.method &&
                workflow?.configurations[APIRouteConfigTabs.General]?.method}
            </span>
            <span>API Route</span>
          </div>
          <div className={"flex gap-3"}>
            <span className=" ">
              {workflow?.configurations[APIRouteConfigTabs.General]?.name ||
                "New Api Route"}
            </span>
          </div>
        </div>

        <div>
          <LazyLoad count={5}>
            <RouteConfigModal
              open={open}
              onToggleModal={onToggleModal}
              parentRef={containerRef}
              updateWorkflow={updateWorkflow}
              workflow={workflow}
              updateRouteConfig={updateRouteConfig}
            />
          </LazyLoad>
        </div>
      </div>

      <div
        className={`${
          totalFlow > 1 ? "flex" : "hidden"
        } w-[16.25rem] flex-col items-center justify-start`}
      >
        <div
          onDragLeave={(e) => onDragLeave(e)}
          onDragOver={(e) => onDragOver(e)}
          onDragEnd={(e) => onDragEnd(e)}
          onDrop={(e) => onDrop(e)}
          className={`flex w-[16.25rem] justify-center`}
        >
          <div
            className={`  h-[1.5rem] max-h-[1.5rem] min-h-[1.5rem] w-0 justify-center  border-2 border-[#e5e7eb] text-[#a8a8a8]`}
          ></div>
        </div>

        <div
          className={`flex h-fit w-[16.25rem] flex-col items-center justify-center`}
          onDragLeave={(e) => onDragLeave(e)}
          onDragOver={(e) => onDragOver(e)}
          onDragEnd={(e) => onDragEnd(e)}
          onDrop={(e) => onDrop(e)}
        >
          <div
            className={`${
              draggedOver
                ? "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={`h-[1.5rem] max-h-[1.5rem] min-h-[1.5rem] w-0 items-start justify-center border-2 border-[#e5e7eb] text-[#a8a8a8]`}
          ></div>
        </div>
      </div>
    </div>
  );
};

export default RouteConfiguration;
