import { render, screen } from "@testing-library/react";
import CinematicMain from "./CinematicMain";
import { useCinematicScroll } from "./useCinematicScroll";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

/**
 * A ilha de cliente da home: tem os hooks de rolagem e de chegada por fragmento e entrega as cenas (filhos) dentro
 * de <main>. Os hooks são trocados por dublês que registram o que recebem.
 */

jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
jest.mock("./useHomeFragmentNavigation", () => ({
  useHomeFragmentNavigation: jest.fn(),
}));

const onLayoutReady = jest.fn();

beforeEach(() => {
  jest.clearAllMocks();
  jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
});

describe("CinematicMain", () => {
  it("renders the scenes as direct children of <main>, inside the clipping wrapper", () => {
    render(
      <CinematicMain>
        <section data-testid="a" />
        <section data-testid="b" />
      </CinematicMain>,
    );

    const main = screen.getByRole("main");
    expect(main).toHaveClass("ds-main", "relative", "z-0");
    expect(
      Array.from(main.children).map((child) =>
        child.getAttribute("data-testid"),
      ),
    ).toEqual(["a", "b"]);
    expect(main.parentElement).toHaveClass("overflow-x-clip");
  });

  it("gives the scroll hook the <main> ref and runs the layout-ready callback once on mount", () => {
    render(
      <CinematicMain>
        <section />
      </CinematicMain>,
    );

    const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
    expect(ref.current).toBe(screen.getByRole("main"));
    expect(onLayoutReady).toHaveBeenCalledTimes(1);
  });

  it("does not run the layout-ready callback again on a re-render", () => {
    const { rerender } = render(
      <CinematicMain>
        <section />
      </CinematicMain>,
    );

    rerender(
      <CinematicMain>
        <section />
        <section />
      </CinematicMain>,
    );

    expect(onLayoutReady).toHaveBeenCalledTimes(1);
  });
});