/**
 * Example for checking the different edge types and source and target positions
 */
import RevueFlow, {
  removeElements,
  addEdge,
  MiniMap,
  Controls,
  Background,
  OnLoadParams,
  Connection,
  Edge,
  Elements
} from '../../src';
import { getElements } from './utils';
import { defineComponent, ref } from 'vue';

const onLoad = (reactFlowInstance: OnLoadParams) => {
  reactFlowInstance.fitView();
  console.log(reactFlowInstance.getElements());
};

const initialElements = getElements();

const EdgeTypesFlow = defineComponent({
  setup() {
    const elements = ref<Elements>(initialElements);
    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));

    return () => (
      <RevueFlow
        v-model={elements.value}
        onLoad={onLoad}
        onElementsRemove={onElementsRemove}
        onConnect={onConnect}
        minZoom={0.2}
      ></RevueFlow>
    );
  }
});

export default EdgeTypesFlow;