import * as React from "react";
import { View } from "react-native";
import { cleanup, renderHook } from "@testing-library/react-hooks";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";

const mockStore = configureStore([]);

const mock_rtl_flag = false;

jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
  useIsRTL: jest.fn(() => mock_rtl_flag),
}));

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

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

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

describe("cellResolver", () => {
  const testCellModule = jest.fn((props) => <View {...{ ...props }} />);

  const component = {
    id: "test",
    styles: {
      cell_plugin_configuration_id: "ABCDE-123456",
    },
  };

  const plugins = [
    {
      identifier: "custom_renderer_plugin",
      module: testCellModule,
    },
  ];

  const styles = {};

  const cellStyles = {
    "ABCDE-123456": {
      plugin_identifier: "custom_renderer_plugin",
      configuration: {},
    },
  };

  const store = mockStore({ cellStyles, styles, plugins });

  // eslint-disable-next-line react/prop-types
  const wrapper = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );

  afterEach(() => {
    cleanup();
  });

  it("resolves import", () => {
    expect(useCellResolver).toBeDefined();
  });

  it("Resolves cell plugin", () => {
    renderHook(() => useCellResolver({ component }), { wrapper });

    expect(testCellModule).toBeCalled();
  });
});