/* eslint-disable react/prop-types */

import * as React from "react";
import { render, screen, act } from "@testing-library/react-native";
import { View } from "react-native";
import {
  withScreenRevealManager,
  SHOWN,
  TIMEOUT,
} from "../withScreenRevealManager";

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

jest.mock("../Overlay", () => ({ Overlay: () => null }));

// jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

const MockComponent = ({
  initialNumberToLoad,
  onLoadFinishedFromScreenRevealManager,
  onLoadFailedFromScreenRevealManager,
}) => {
  React.useEffect(() => {
    // Simulate loading components
    for (let i = 0; i < initialNumberToLoad; i++) {
      onLoadFinishedFromScreenRevealManager(i);
    }
  }, [initialNumberToLoad, onLoadFinishedFromScreenRevealManager]);

  return (
    <View
      testID="mock-component"
      initialNumberToLoad={initialNumberToLoad}
      onLoadFinishedFromScreenRevealManager={
        onLoadFinishedFromScreenRevealManager
      }
      onLoadFailedFromScreenRevealManager={onLoadFailedFromScreenRevealManager}
    />
  );
};

const WrappedComponent = withScreenRevealManager(MockComponent);

describe("withScreenRevealManager disableIncrementalLoading", () => {
  const components = (count: number) =>
    Array(count).fill({ component_type: "grid-qb" });

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("asks for every component at once when incremental loading is disabled", () => {
    render(
      <WrappedComponent
        componentsToRender={components(6)}
        disableIncrementalLoading
      />
    );

    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
      6
    );
  });

  it("still tracks the component count after it changes", () => {
    const { rerender } = render(
      <WrappedComponent
        componentsToRender={components(6)}
        disableIncrementalLoading
      />
    );

    rerender(
      <WrappedComponent
        componentsToRender={components(9)}
        disableIncrementalLoading
      />
    );

    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
      9
    );
  });

  it("loads incrementally when the flag is not set", () => {
    render(<WrappedComponent componentsToRender={components(6)} />);

    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
      3
    );
  });
});

describe.skip("withScreenRevealManager", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.runOnlyPendingTimers();
    jest.useRealTimers();
  });

  it("should render the wrapped component", () => {
    render(
      <WrappedComponent
        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
      />
    );

    expect(screen.getByTestId("mock-component")).toBeTruthy();
  });

  it("should animate opacity when ready to show", () => {
    render(
      <WrappedComponent
        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
      />
    );

    const animatedView = screen.getByTestId("animated-component");

    act(() => {
      jest.advanceTimersByTime(TIMEOUT + 100);
    });

    expect(animatedView.props.style.opacity).toBe(SHOWN);
  });

  it("should pass initialNumberToLoad, onLoadFinishedFromScreenRevealManager, and onLoadFailedFromScreenRevealManager to the wrapped component", () => {
    render(
      <WrappedComponent
        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
      />
    );

    const mockComponent = screen.getByTestId("mock-component");

    expect(mockComponent.props.initialNumberToLoad).toBe(3);

    expect(
      mockComponent.props.onLoadFinishedFromScreenRevealManager
    ).toBeInstanceOf(Function);

    expect(
      mockComponent.props.onLoadFailedFromScreenRevealManager
    ).toBeInstanceOf(Function);
  });
});