import * as React from "react";
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
import { DefaultCell } from "../";
import { masterCellBuilder } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell";
import { View, Text, Image } from "react-native";

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
  useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
  useIsScreenActive: jest.fn(() => true),
}));

jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
  useScreenState: jest.fn(() => ({
    get: jest.fn(),
    setSelectedEntry: jest.fn(),
  })),
}));

describe("DefaultCell", () => {
  it("is a function", () => {
    expect(DefaultCell).toBeFunction();
  });

  it("injects properties from styles into the resulting view trees", () => {
    const styles = {
      tv: {
        main_text: {
          color: "#ff112233", // Take care! #ARGB notation, straight from Zapp's configuration
        },
      },
    } as const;

    const CellRenderer = masterCellBuilder({
      components: {
        View: View,
        Text: Text,
        Image: Image,
      },
      containerStyle: {},
      cellConfiguration: DefaultCell(styles),
    });

    const { UNSAFE_getAllByType } = renderWithProviders(<CellRenderer />);
    const textElement = UNSAFE_getAllByType(Text)[0];

    expect(textElement.props.style).toMatchObject({
      color: "rgba(239,239,239,1.0)",
    });
  });

  it.skip("matches snapshot", () => {
    // Why snapshots are not compared?
    // Because of the automatic generation of _random_keys in the element mapper:
    // packages/zapp-react-native-ui-components/Components/MasterCell/elementMapper.js
  });
});