/* eslint-disable react/display-name */
import * as React from "react";
import { render } from "@testing-library/react-native";
import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";

import { PlayerLiveImage } from "../PlayerLiveImageComponent";
import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";

import { Provider } from "react-redux";
import configureStore from "redux-mock-store";

const mock_seekTo = jest.fn();

jest.mock(
  "@applicaster/zapp-react-native-utils/appUtils/playerManager/player",
  () => ({
    Player: {
      seekTo: mock_seekTo,
    },
  })
);

jest
  .spyOn(useNavigationHooks, "useNavigation")
  .mockImplementation(() => ({ videoModalState: { visible: false } }));

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

const mockStore = configureStore();

const store = mockStore({ appData: {} });

const Wrapper = ({ children }: { children: React.ReactNode }) => (
  /* @ts-ignore */
  <Provider store={store}>
    <ThemeContext.Provider
      value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
    >
      {children}
    </ThemeContext.Provider>
  </Provider>
);

describe("PlayerLiveImageComponent", () => {
  const defaultProps = {
    item: { id: "1", title: "Test", type: { value: "" } },
    style: {},
    playerId: "player1",
    imageKey: "image1",
    audioMutedByDefault: false,
    screenConfig: {},
  };

  const autoplay_settings = {
    start_time: "00:10",
    end_time: "00:35",
  };

  beforeAll(() => {
    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => {
      const Player = jest.requireActual(
        "@applicaster/zapp-react-native-utils/appUtils/playerManager/player"
      ).Player;

      return {
        controller: new Player({}),
        Component: () => null,
      };
    });

    jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
  });

  it("should render correctly with default props", () => {
    const component = render(
      <Wrapper>
        <PlayerLiveImage {...defaultProps} />
      </Wrapper>
    );

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

  it("should call seekTo() on video loaded with autoplay settings", () => {
    const props = {
      ...defaultProps,
      item: {
        ...defaultProps.item,
        extensions: { autoplay_settings },
      },
    };

    render(
      <Wrapper>
        <PlayerLiveImage {...props} />
      </Wrapper>
    );

    // TODO: implement this test
  });

  it("should call pauseLiveImage() on video reached end timestamp", () => {
    const props = {
      ...defaultProps,
      item: {
        ...defaultProps.item,
        extensions: { autoplay_settings },
      },
    };

    render(
      <Wrapper>
        <PlayerLiveImage {...props} />
      </Wrapper>
    );

    // TODO: implement this test
  });

  it("should not register the player at mount (lazy creation)", () => {
    render(
      <Wrapper>
        <PlayerLiveImage {...defaultProps} />
      </Wrapper>
    );

    // Player is not registered until playback starts (lazy creation)
    const isPlayerRegistered = playerManager.isPlayerRegistered(
      defaultProps.playerId
    );

    expect(isPlayerRegistered).toBe(false);
  });

  it("should not register the player for 'pre-measurement' item", () => {
    const props = {
      ...defaultProps,
      item: {
        ...defaultProps.item,
        id: "pre-measurement-1",
      },
    };

    render(
      <Wrapper>
        <PlayerLiveImage {...props} />
      </Wrapper>
    );

    const isPlayerRegistered = playerManager.isPlayerRegistered(props.playerId);
    expect(isPlayerRegistered).toBe(false);
  });
});