import {
  DndContext,
  MouseSensor,
  TouchSensor,
  KeyboardSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { ReactFlowProvider, useReactFlow } from "react-flow-renderer";
import useStore from "../../lib/FlowEditor/FlowEditorStore";
import Flow from "./Flow";
import Panel from "./Panel";

const FlowEditorComponent = () => {
  const { addNode } = useStore();
  const reactFlowInstance = useReactFlow();

  const sensors = useSensors(
    useSensor(MouseSensor),
    useSensor(TouchSensor),
    useSensor(KeyboardSensor)
  );

  const handleDragEnd = (event: any) => {
    const { active, over } = event;

    if (over && over.id == "flow") {
      const activeType = active.data.current.type;
      const eventType = event.activatorEvent.type;

      var position = { x: 0, y: 0 };
      if (eventType == "touchstart" || eventType == "touchend") {
        const touch = event.activatorEvent.touches[0];
        position = reactFlowInstance.project({
          x: touch.clientX + event.delta.x - 220,
          y: touch.clientY + event.delta.y - 60,
        });
      } else {
        position = reactFlowInstance.project({
          x: event.activatorEvent.clientX + event.delta.x - 220,
          y: event.activatorEvent.clientY + event.delta.y - 60,
        });
      }

      addNode(activeType, position);
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
      <Panel />
      <Flow />
    </DndContext>
  );
};

const FlowEditor = () => {
  return (
    <div className="flow-editor">
      <ReactFlowProvider>
        <FlowEditorComponent />
      </ReactFlowProvider>
    </div>
  );
};

export default FlowEditor;