import { useDroppable } from "@dnd-kit/core";
import { useState } from "react";
import ReactFlow, {
  Background,
  Controls,
  ReactFlowInstance,
} from "react-flow-renderer";
import useStore from "../../lib/FlowEditor/FlowEditorStore";
import GenericNode from "./nodes/Node";

const nodeTypes = { generic: GenericNode };

const Flow = () => {
  const [reactFlowInstance, setReactFlowInstance] =
    useState<ReactFlowInstance>();

  const onInit = (rfi: ReactFlowInstance) => {
    setReactFlowInstance(rfi);
  };

  const { isOver, setNodeRef } = useDroppable({ id: "flow" });

  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();

  return (
    <div ref={setNodeRef} className="flow h-screen w-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onInit={onInit}
        fitView
        snapToGrid={true}
      >
        <Controls />
        <Background />
      </ReactFlow>
    </div>
  );
};

export default Flow;