import create from "zustand";
import {
  Connection,
  Edge,
  EdgeChange,
  Node,
  NodeChange,
  addEdge,
  OnNodesChange,
  OnEdgesChange,
  OnConnect,
  applyNodeChanges,
  applyEdgeChanges,
  XYPosition,
} from "react-flow-renderer";
import { nanoid } from "nanoid";

import initialNodes from "./nodes";
import initialEdges from "./edges";

type FlowEditorStore = {
  nodes: Node[];
  edges: Edge[];
  panelClosed: boolean;
  onNodesChange: OnNodesChange;
  onEdgesChange: OnEdgesChange;
  onConnect: OnConnect;
  addNode: (type: string, position: XYPosition) => void;
  togglePanelState: () => void;
};

const useStore = create<FlowEditorStore>((set, get) => ({
  nodes: initialNodes,
  edges: initialEdges,
  panelClosed: false,
  onNodesChange: (changes: NodeChange[]) => {
    set({
      nodes: applyNodeChanges(changes, get().nodes),
    });
  },
  onEdgesChange: (changes: EdgeChange[]) => {
    set({
      edges: applyEdgeChanges(changes, get().edges),
    });
  },
  onConnect: (connection: Connection) => {
    set({
      edges: addEdge(connection, get().edges),
    });
  },
  addNode: (type: string, position: XYPosition) => {
    const newNode: Node = {
      id: `node_${nanoid()}`,
      type: type,
      position: position,
      data: { label: `${type} node` },
    };
    set({
      nodes: get().nodes.concat(newNode),
    });
  },
  togglePanelState: () => {
    set({
      panelClosed: !get().panelClosed,
    });
  },
}));

export default useStore;