import React, { useMemo } from 'react';
import { StoreProvider } from 'easy-peasy';

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

import GraphView from '../container/GraphView';

import DefaultNode from '../components/Nodes/DefaultNode';
import InputNode from '../components/Nodes/InputNode';
import OutputNode from '../components/Nodes/OutputNode';
import { createNodeTypes } from '../container/NodeRenderer/utils';

import BezierEdge from '../components/Edges/BezierEdge';
import StraightEdge from '../components/Edges/StraightEdge';
import StepEdge from '../components/Edges/StepEdge';
import { createEdgeTypes } from '../container/EdgeRenderer/utils';
import store from '../store';

import '../style.css';

const ReactGraph = ({
  style, onElementClick, elements, children,
  nodeTypes, edgeTypes, onLoad, onMove,
  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
  connectionLineStyle, deleteKeyCode, selectionKeyCode
}) => {
  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);

  return (
    <div style={style} className="react-graph">
      <StoreProvider store={store}>
        <GraphView
          onLoad={onLoad}
          onMove={onMove}
          onElementClick={onElementClick}
          onNodeDragStop={onNodeDragStop}
          nodeTypes={nodeTypesParsed}
          edgeTypes={edgeTypesParsed}
          connectionLineType={connectionLineType}
          connectionLineStyle={connectionLineStyle}
          selectionKeyCode={selectionKeyCode}
          onElementsRemove={onElementsRemove}
          deleteKeyCode={deleteKeyCode}
          elements={elements}
          onConnect={onConnect}
        />
        {children}
      </StoreProvider>
    </div>
  );
};

ReactGraph.displayName = 'ReactGraph';

ReactGraph.defaultProps = {
  onElementClick: () => {},
  onElementsRemove: () => {},
  onNodeDragStop: () => {},
  onConnect: () => {},
	onLoad: () => {},
  onMove: () => {},
  nodeTypes: {
    input: InputNode,
    default: DefaultNode,
    output: OutputNode
  },
  edgeTypes: {
    default: BezierEdge,
    straight: StraightEdge,
    step: StepEdge
  },
  connectionLineType: 'bezier',
  connectionLineStyle: {},
  deleteKeyCode: 8,
  selectionKeyCode: 16
};

export default ReactGraph;