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

const props = {
  entry: {},
  style: { flex: 1 },
  configuration: { modal_background_color: "transparent" },
};

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
  useDimensions: jest.fn(() => ({
    width: 20,
    height: 30,
  })),
}));

jest.mock("react-native-safe-area-context", () => ({
  useSafeAreaInsets: jest.fn(() => ({
    top: 20,
    bottom: 0,
  })),
}));

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap",
  () => {
    const View = jest.requireActual("react-native").View;

    return { ComponentsMap: View };
  }
);

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
  useTargetScreenData: jest.fn(() => ({
    id: "test-id",
    ui_components: [],
    data: { source: "test-source" },
  })),
}));

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

describe("PlayerDetails", () => {
  it("renders properly", () => {
    const { toJSON } = render(<PlayerDetails {...props} />);

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

  it("renders properly on tablet in landscape orientation", () => {
    const { toJSON } = render(
      <PlayerDetails {...props} isTabletLandscape={true} />
    );

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