import * as React from "react";
import { View } from "react-native";
import { render, waitFor } from "@testing-library/react-native";
import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";

const navigator_mock = {
  currentRoute: "/river/A1234",
  screenData: {},
  activeRiver: {
    navigations: {},
    id: "A1234",
    home: false,
  },
};

jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
  ...jest.requireActual<any>(
    "@applicaster/zapp-react-native-utils/navigationUtils"
  ),
  findMenuPlugin: () => ({}),
}));

jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
  useRiverInitialState: () => ({}),
}));

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
  useNavigation: () => navigator_mock,
}));

jest.mock("../../../River/useScreenConfiguration", () => ({
  useScreenConfiguration: () => ({}),
}));

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

jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
  ...jest.requireActual<any>("@applicaster/zapp-react-native-utils/theme"),
  useTheme: () => ({}),
}));

const { ScreenContainer } = require("../ScreenContainer");

describe("ScreenContainer", () => {
  const screenLayout = {
    screenMarginTop: 10,
    screenMarginBottom: 10,
    screenWidth: 1920,
    screenHeight: 1080,
    componentAnchorPointY: 200,
    componentAvailableWidth: 1920,
  };

  const setScreenLayout = () => {};
  const resetScreenLayout = () => {};

  const wrapper = ({ children }) => (
    <WrappedWithProviders>
      <ScreenLayoutContext.Provider
        value={{ ...screenLayout, setScreenLayout, resetScreenLayout }}
      >
        <ScreenContainer NavBar={View}>{children}</ScreenContainer>
      </ScreenLayoutContext.Provider>
    </WrappedWithProviders>
  );

  const TestComp = () => <View testID="test-component" />;

  it("renders", () => {
    const { toJSON } = render(<TestComp />, { wrapper });

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

  it("renders passed component", async () => {
    const { getByTestId } = render(<TestComp />, { wrapper });

    await waitFor(() => {
      return expect(getByTestId("screen-container")).toBeDefined();
    });

    expect(getByTestId("test-component")).toBeDefined();
  });

  it("sets margins provided by the theme", async () => {
    const { getByTestId } = render(<TestComp />, { wrapper });

    await waitFor(() => {
      return expect(getByTestId("screen-container")).toBeDefined();
    });

    const screen = getByTestId("screen-container");
    expect(screen.props.style).toMatchSnapshot();
  });
});