import { render } from "@testing-library/react-native";
import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
import React from "react";

jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
  useCurrentScreenData: jest.fn(() => ({})),
  useNavigation: jest.fn(() => ({
    data: {},
    modalData: null,
    videoModalState: {},
    canGoBack: jest.fn(() => false),
  })),
  useRoute: jest.fn(() => ({ screenData: null })),
  isNavBarVisible: jest.fn(() => true),
}));

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext",
  () => ({
    useModalNavigationContext: jest.fn(() => false),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext",
  () => ({
    useNestedNavigationContext: jest.fn(() => false),
  })
);

describe("ScreenContext", () => {
  describe("ScreneContext context", () => {
    it("should return the context", () => {
      expect(ScreenContext).toBeDefined();
    });
  });

  describe("ScreenContextProvider", () => {
    it("should return the provider", () => {
      expect(ScreenContextProvider).toBeDefined();
    });

    it("recreates _feedStore when pathname changes", () => {
      const contexts = [];

      const CaptureContext = () => {
        const context = React.useContext(ScreenContext);
        contexts.push(context);

        return null;
      };

      const { rerender } = render(
        <ScreenContextProvider pathname="/screen-a">
          <CaptureContext />
        </ScreenContextProvider>
      );

      const first = contexts[contexts.length - 1];
      first._feedStore.setState({ screenFeed: "screen-a" });

      rerender(
        <ScreenContextProvider pathname="/screen-b">
          <CaptureContext />
        </ScreenContextProvider>
      );

      const second = contexts[contexts.length - 1];

      expect(second._feedStore).not.toBe(first._feedStore);
      expect(second._feedStore.getState()).toEqual({});
    });
  });

  describe("withScreenContext", () => {
    it("should return the context", () => {
      const Component = () => null;
      const WrappedComponent = withScreenContext(Component);
      const { toJSON } = render(<WrappedComponent />);

      expect(toJSON()).toMatchSnapshot();
    });
  });
});