import React from "react";

import { View } from "react-native";

import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

const props = {
  entry: { id: "test" },
  style: {
    height: 800,
    width: 300,
  },
  containerStyle: {},
  configuration: {
    tablet_landscape_sidebar_width: "35%",
    tablet_landscape_player_container_background_color: "red",
  },
};

const useIsTablet = jest.fn();

jest.mock("react-native");

jest.mock("react-native-gesture-handler");

jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));

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

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
  useIsTablet,
}));

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

jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
  isTV: jest.fn(() => false),
  isApplePlatform: jest.fn(() => true),
  platformSelect: jest.fn((props) => props.android),
}));

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
  isNavBarVisible: jest.fn(() => true),
  useRoute: jest.fn(() => ({
    pathname: "/river/testId",
  })),
  useNavigation: jest.fn(() => ({
    canGoBack: () => false,
    currentRoute: "/river/testId",
    data: { screen: { id: "testId" } },
    videoModalState: { visible: false },
  })),
}));

jest.mock("../utils", () => ({ playerDimensionsHack: {} }));

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

jest.useFakeTimers();
const children = jest.fn(() => {});

describe("PlayerWrapper", () => {
  it("renders properly", () => {
    useIsTablet.mockReturnValue(false);

    const element = renderWithProviders(
      <PlayerWrapper {...props}>{children}</PlayerWrapper>
    );

    expect(element).toMatchSnapshot();
  });

  it("renders inline", () => {
    useIsTablet.mockReturnValue(false);

    const element = renderWithProviders(
      <PlayerWrapper {...props} inline={true} isModal={true}>
        {children}
      </PlayerWrapper>
    );

    expect(element).toMatchSnapshot();
  });

  it("renders inline on tablet in landscape orientation", () => {
    useIsTablet.mockReturnValue(true);

    const element = renderWithProviders(
      <PlayerWrapper {...props} inline={true} isModal={true}>
        {children}
      </PlayerWrapper>
    );

    expect(element).toMatchSnapshot();
  });

  it("renders inline and docked", () => {
    useIsTablet.mockReturnValue(false);

    const children = jest.fn(() => {});
    const dimensions = { height: undefined, width: props.style.width };

    const element = renderWithProviders(
      <PlayerWrapper
        {...props}
        inline={true}
        isModal={true}
        docked={true}
        style={dimensions}
      >
        {children}
      </PlayerWrapper>
    );

    const expectDimensions = {
      ...dimensions,
      width: undefined,
      aspectRatio: 16 / 9,
    };

    expect(element).toMatchSnapshot();
    expect(children).toHaveBeenCalledWith(expectDimensions);
  });
});