import * as React from "react";
import { omit } from "ramda";
import { View } from "react-native";
import { render } from "@testing-library/react-native";
import { Provider } from "react-redux";
import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
import configureStore from "redux-mock-store";
import Layout from "../index.web";

jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
  useTheme: () => ({
    app_background_color: "#000000",
  }),
}));

const withoutChildren = omit(["children"]);

jest.mock("../../../Screen/TV/index.web", () => {
  const View = jest.requireActual("react-native").View;

  return {
    Screen: View,
  };
});

const mockStore = configureStore()({
  appState: { appReady: true },
});

describe("Layout TV", () => {
  const navigator = {
    currentRoute: "/river/A1234",
    canGoBack: jest.fn(),
    mainStack: [
      {
        route: "/river/A1234",
        state: { screen: {} },
      },
    ],
  };

  const wrapper = ({ children }) => (
    <Provider store={mockStore}>
      <NavigationContext.Provider value={navigator}>
        {children}
      </NavigationContext.Provider>
    </Provider>
  );

  const NavBar = (props) => (
    <View testID="nav-bar-component" {...withoutChildren(props)} />
  );

  const Background = (props: Record<any, any>) => (
    <View testID="background-component" {...withoutChildren(props)}>
      {props.children}
    </View>
  );

  const Components = {
    NavBar,
    Background,
  };

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

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