import React from "react";

import { renderHook } from "@testing-library/react-hooks";
import { act, waitFor } from "@testing-library/react-native";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";
import { useTrackedView } from "../useTrackedView";

const mockUpdateComponentsPositions = jest.fn();

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
  () => ({
    useScreenTrackedViewPositionsContext: jest.fn(() => ({
      updateComponentsPositions: mockUpdateComponentsPositions,
      value: {
        "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
        "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
      },
    })),
  })
);

jest.useFakeTimers();

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
);

const mockStore = configureStore();

const store = mockStore({ appData: {} });

const Wrapper = ({ children }: { children: React.ReactChild }) => (
  /* @ts-ignore */
  <Provider store={store}>{children}</Provider>
);

describe("useTrackCurrentAutoScrollingElement", () => {
  it("should update position for selected component - onViewportEnter", async () => {
    const { result } = renderHook(() => useTrackedView("123"), {
      wrapper: Wrapper,
    });

    expect(result.current.inViewPort).toBe(false);

    const mockRect = {
      rect: { left: 1, right: 1, top: 1, bottom: 1 },
    };

    act(() => {
      result.current.onPositionUpdated(mockRect);
    });

    await waitFor(() => {
      expect(result.current.inViewPort).toBe(true);
    });

    expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
      "123",
      expect.any(Object)
    );
  });
});