import {act} from '@testing-library/react';
import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
import { mockReactFlow } from '../../../setupFlowTests.ts';

beforeAll(() => {
  mockReactFlow();
});

describe('FlowStore Functionality', () => {
  describe('Node changes', () => {
    // currently just using a single function from the ReactFlow library,
    // so testing would mean we are testing already tested behavior.
    // if implementation gets modified tests should be added for custom behavior
  });
  describe('Edge changes', () => {
    // currently just using a single function from the ReactFlow library,
    // so testing would mean we are testing already tested behavior.
    // if implementation gets modified tests should be added for custom behavior
  })
  describe('ReactFlow onConnect', () => {
    test('adds an edge when onConnect is triggered', () => {
      const {onConnect} = useFlowStore.getState();

      act(() => {
        onConnect({
          source: 'A',
          target: 'B',
          sourceHandle: null,
          targetHandle: null,
        });
      });

      const updatedEdges = useFlowStore.getState().edges;
      expect(updatedEdges).toHaveLength(1);
      expect(updatedEdges[0]).toMatchObject({
        source: 'A',
        target: 'B',
      });
    });
  });
  describe('ReactFlow onReconnect', () => {
    test('reconnects an existing edge when onReconnect is triggered', () => {
      const {onReconnect} = useFlowStore.getState();
      const oldEdge = {
        id: 'xy-edge__A-B',
        source: 'A',
        target: 'B'
      };
      const newConnection = {
        source: 'A',
        target: 'C',
        sourceHandle: null,
        targetHandle: null,
      };
      act(() => {
        useFlowStore.setState({
          edges: [oldEdge]
        });
        onReconnect(oldEdge, newConnection);
      });

      const updatedEdges = useFlowStore.getState().edges;
      expect(updatedEdges).toHaveLength(1);
      expect(updatedEdges[0]).toMatchObject({
        id: 'xy-edge__A-C',
        source: 'A',
        target: 'C',
      });
    });
  });
  describe('ReactFlow onReconnectStart', () => {
  });
  describe('ReactFlow onReconnectEnd', () => {
  });
  describe('ReactFlow setNodes', () => {
    test('sets nodes to the provided list of nodes', () => {
      const {setNodes} = useFlowStore.getState();

      act(() => {
        setNodes([
          {
            id: 'start',
            type: 'start',
            position: {x: 0, y: 0},
            data: {label: 'start'}
          },
          {
            id: 'end',
            type: 'end',
            position: {x: 0, y: 300},
            data: {label: 'End'}
          }
        ]);
      });

      const updatedNodes = useFlowStore.getState().nodes;
      expect(updatedNodes).toHaveLength(2);
      expect(updatedNodes[0]).toMatchObject({
        id: 'start',
        type: 'start',
        position: {x: 0, y: 0},
        data: {label: 'start'}
      });
      expect(updatedNodes[1]).toMatchObject({
        id: 'end',
        type: 'end',
        position: {x: 0, y: 300},
        data: {label: 'End'}
      });
    });
  });
  describe('ReactFlow setEdges', () => {
   test('sets edges to the provided list of edges', () => {
      const {setEdges} = useFlowStore.getState();

      act(() => {
        setEdges([
          {
            id: 'start-end',
            source: 'start',
            target: 'end'
          }
        ]);
      });

      const updatedEdges = useFlowStore.getState().edges;
      expect(updatedEdges).toHaveLength(1);
      expect(updatedEdges[0]).toMatchObject({
        id: 'start-end',
        source: 'start',
        target: 'end'
      });
    });
  });
});