import * as React from "react";
import { View } from "react-native";
import { render } from "@testing-library/react-native";

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

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

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
  useCurrentScreenData: jest.fn(() => ({})),
}));

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

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

  const setScreenLayout = () => {};

  const wrapper = ({ children }) => (
    <ScreenLayoutContext.Provider value={{ ...screenLayout, setScreenLayout }}>
      {children}
    </ScreenLayoutContext.Provider>
  );

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

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

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

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

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

  it("returns null when isVisible flag is off", () => {
    const { toJSON } = render(
      <NavBarContainer isVisible={false}>
        <TestComp />
      </NavBarContainer>,
      { wrapper }
    );

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