import React, { useRef, useState } from "react";
import { TrashIcon } from "@/assets/svgs";
import { LazyLoad } from "@/components/LazyLoad";
import { GlobalContext } from "@/context/Global";
import { DropdownOption, DropdownOptions } from "@/components/DropdownOptions";
import { RouteIfControlModal } from "./RouteIfControlModal";
import { DragIndicator } from "./DragIndicator";
import { DragSegments } from "./DragSegments";
import { DragSegmentsTypes } from "@/utils/constants";
import { RouteEditorWorkflow } from "../RouteEditorWorkflow";

const RouteIfControl = ({
  onDeleteWorkflowData,
  index,
  setWorkflowData,
  totalFlow,
  workflow,
  addNewCondition,
  segment,
  parentId,
  addVariable,
  variables,
  updateWorkflow,
}) => {
  const containerRef = useRef(null);
  const dropdownOptions = [
    {
      action: () => onDeleteWorkflowData(workflow?.id, segment, parentId),
      icon: <TrashIcon />,
    },
  ];
  const [draggedOver, setDraggedOver] = useState(false);
  const [draggedRegion, setDragRegion] = useState("");
  const [open, setOpen] = useState(false);
  const [hovered, setHovered] = useState(false);

  const onToggleModal = (value, e) => {
    if (value && e && e.target?.classList?.contains("control")) {
      setOpen(true);
    } else if (!value && open) {
      setOpen(false);
    }
  };

  const onDrop = (e, segment) => {
    e.preventDefault();
    setWorkflowData(workflow?.id, segment);
    setDraggedOver(false);
    setDragRegion("");
  };
  const onDragOver = (e, region) => {
    e.preventDefault();
    if (!draggedOver) {
      setDraggedOver(true);
      setDragRegion(region);
    }
  };
  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);
      setDragRegion("");
    }
  };
  const onDragEnd = (e) => {
    e.preventDefault();
    if (!hovered) {
      setDraggedOver(false);
      setDragRegion("");
    }
  };

  return (
    <div
      ref={containerRef}
      onMouseEnter={(e) => handleMouseEnter(e)}
      onMouseLeave={(e) => handleMouseLeave(e)}
      className={`relative flex h-fit w-fit select-none flex-col items-center justify-start `}
    >
      <div
        onClick={(e) => onToggleModal(true, e)}
        className="control group relative z-[1] flex h-[4.3438rem] max-h-[4.3375rem] 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={"control flex h-7 w-full gap-3"}>
          <div className="control flex grow items-center justify-start gap-2">
            <span className="control h-5 max-h-5 rounded-md bg-primaryBlue px-2 py-1 text-[.725rem] leading-snug tracking-widest text-white">
            </span>
            <span className="control">if control</span>
          </div>

          <LazyLoad>
            <DropdownOptions className={`hidden group-hover:block`}>
              {dropdownOptions?.map((option, index) => (
                <DropdownOption
                  key={index + 1}
                  icon={option?.icon}
                  name={option?.name}
                  onClick={option?.action}
                />
              ))}
            </DropdownOptions>
          </LazyLoad>
        </div>
        <div className={"flex gap-3"}></div>
      </div>

      <div
        className={`flex h-fit max-h-fit min-h-[12rem]  w-fit min-w-[28rem] max-w-fit flex-col rounded-md  bg-transparent `}
      >
        <div
          className={`relative flex  h-[12rem] max-h-[12rem] min-h-[12rem] w-[28rem] min-w-[28rem] max-w-[28rem] gap-2 rounded-md bg-transparent `}
        >
          <div
            className={`absolute left-[2%] top-[-5%] m-auto h-fit w-fit rounded-md px-2  ${
              draggedOver && draggedRegion === DragSegmentsTypes.TRUE
                ? "border-primaryBlue bg-primaryBlue text-white"
                : "border-[#e5e7eb] bg-[#e5e7eb] text-[#a8a8a8]"
            }`}
          >
            True
          </div>
          <div
            className={`absolute right-[2%] top-[-5%] m-auto h-fit w-fit rounded-md px-2 text-[#a8a8a8] ${
              draggedOver && draggedRegion === DragSegmentsTypes.FALSE
                ? "border-primaryBlue bg-primaryBlue text-white"
                : "border-[#e5e7eb] bg-[#e5e7eb] text-[#a8a8a8]"
            }`}
          >
            False
          </div>
          {/*  */}

          <LazyLoad>
            <DragIndicator
              draggedOver={draggedOver}
              draggedRegion={draggedRegion}
              region={DragSegmentsTypes.TRUE}
              onDragEnd={onDragEnd}
              onDragLeave={onDragLeave}
              onDragOver={onDragOver}
              onDrop={onDrop}
            />
          </LazyLoad>
          <LazyLoad>
            <DragIndicator
              draggedOver={draggedOver}
              draggedRegion={draggedRegion}
              region={DragSegmentsTypes.FALSE}
              onDragEnd={onDragEnd}
              onDragLeave={onDragLeave}
              onDragOver={onDragOver}
              onDrop={onDrop}
            />
          </LazyLoad>

          {/*  */}
          <LazyLoad>
            <DragSegments
              onDragEnd={onDragEnd}
              onDragLeave={onDragLeave}
              onDragOver={onDragOver}
              onDrop={onDrop}
            />
          </LazyLoad>

          {/*  */}
          {workflow?.action?.true ? (
            <div
              className={`${
                workflow?.action?.true ? "block" : "hidden"
              } absolute inset-y-0 -left-[25%] m-auto flex h-fit w-fit min-w-fit max-w-fit justify-center`}
            >
              <LazyLoad>
                <RouteEditorWorkflow
                  segment={DragSegmentsTypes.TRUE}
                  parentId={workflow?.id}
                  workflow={workflow?.action?.true}
                  index={index}
                  totalFlow={totalFlow}
                  setWorkflowData={setWorkflowData}
                  onDeleteWorkflowData={onDeleteWorkflowData}
                  addVariable={addVariable}
                  variables={variables}
                  updateWorkflow={updateWorkflow}
                />
              </LazyLoad>
            </div>
          ) : null}
          {workflow?.action?.false ? (
            <div
              className={`${
                workflow?.action?.false ? "block" : "hidden"
              } absolute inset-y-0 -right-[25%] m-auto flex h-fit w-fit min-w-fit max-w-fit justify-center`}
            >
              <LazyLoad>
                <RouteEditorWorkflow
                  segment={DragSegmentsTypes.FALSE}
                  parentId={workflow?.id}
                  workflow={workflow?.action?.false}
                  index={index}
                  totalFlow={totalFlow}
                  setWorkflowData={setWorkflowData}
                  onDeleteWorkflowData={onDeleteWorkflowData}
                  addVariable={addVariable}
                  variables={variables}
                  updateWorkflow={updateWorkflow}
                />
              </LazyLoad>
            </div>
          ) : null}
        </div>
        <LazyLoad>
          <DragIndicator
            draggedOver={draggedOver}
            draggedRegion={draggedRegion}
            region={DragSegmentsTypes.NEXT}
            onDragEnd={onDragEnd}
            onDragLeave={onDragLeave}
            onDragOver={onDragOver}
            onDrop={onDrop}
          />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad count={5}>
          <RouteIfControlModal
            open={open}
            onToggleModal={onToggleModal}
            parentRef={containerRef}
            workflow={workflow}
            addNewCondition={addNewCondition}
            variables={variables}
            updateWorkflow={updateWorkflow}
          />
        </LazyLoad>
      </div>
    </div>
  );
};

export default RouteIfControl;
