import { useStore } from "@/hooks/useEdg";

import { useUser } from "@/hooks/useUser";

import { useCallback, useEffect, useMemo, useState } from "react";
import ReactFlow, { Background, Panel, ReactFlowProvider } from "reactflow";

import { Menu, TriggersSelect } from "../Actions";

import { ActionsSelect } from "../Actions/ActionsSelect";
import { ActionsSelectA } from "../Actions/ActionsSelectA";
import { Admin } from "../Admin";
import { Badge } from "../Badge";
import { Collaboration } from "../Collaboration";
import { FlowBar, Separator } from "../FlowBar";
import { FolderControler } from "../FlowManager";

import { BasicNode } from "../Nodes/Basic";
import { WebhookNode } from "../Nodes/Webhook";

function Flow() {
  const { isLoading } = useUser();

  //const nodeTypes = { basic: BasicNode };
  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();

  const nodeTypes = useMemo(
    () => ({
      basic: BasicNode,
      webhook: WebhookNode,
    }),
    []
  );

  return (
    <ReactFlow
      nodeTypes={nodeTypes}
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    >
      <Panel position="top-left">
        <FlowBar
          reactFlowInstance={null}
          replaceFlowWith={"dashboard"}
          replaceFolderWith={"project"}
        >
          <FolderControler reactFlowInstance={null} />
          <Separator style={{ margin: "0 15px" }} />
          <TriggersSelect />
          <ActionsSelect />
          <ActionsSelectA />
          <Separator style={{ margin: "0 15px" }} />
          {/* <Menu />
          <Separator style={{ margin: "0 15px" }} /> */}
          <Collaboration excludeViewer={true} />
          {/* <Separator style={{ margin: "0 15px" }} />
          <NotificationFeed /> */}
          <Separator style={{ margin: "0 15px" }} />
          <Admin />

          {/* <div
            onClick={() => {
              addNodes({
                id: "3",
                data: { label: "Node 3" },
                position: { x: 5, y: 200 },
                type: "basic",
              });
            }}
          >
            Add{" "}
          </div> */}
        </FlowBar>
      </Panel>

      <Background />
      <Panel position="bottom-right">
        <Badge />
      </Panel>
    </ReactFlow>
  );
}

export default function FlowProvider() {
  return (
    <>
      <ReactFlowProvider>
        <Flow />
      </ReactFlowProvider>
    </>
  );
}
