import { render, screen } from "@testing-library/react";
import type { ReactNode } from "react";
import CinematicHome from "./CinematicHome";

jest.mock("next/dynamic", () => {
  const labels = [
    "About",
    "Skills",
    "Experience",
    "WorkModalities",
    "Contact",
    "LighthouseMetrics",
    "Footer",
    "ScrollVelocityText",
    "SectionDivider",
  ];
  let index = 0;

  return () => {
    const label = labels[index++] ?? "DynamicSection";
    return function DynamicMock() {
      return <div data-testid={`dynamic-${label}`}>{label}</div>;
    };
  };
});

jest.mock("../Hero", () => () => <div data-testid="hero" />);
jest.mock("../Projects", () => () => <div data-testid="projects" />);
jest.mock("../story/ReelDirector", () => () => (
  <div data-testid="reel-director" />
));
jest.mock("../story/NotebookStory", () => () => (
  <section data-testid="notebook-story" />
));
jest.mock(
  "./CinematicSection",
  () =>
    ({ children }: { children: ReactNode }) => <>{children}</>,
);

describe("CinematicHome", () => {
  it("uses one notebook story and keeps About after it", () => {
    render(
      <CinematicHome experiences={[]} projects={[]} skillCategories={[]} />,
    );

    const story = screen.getByTestId("notebook-story");
    const about = screen.getByTestId("dynamic-About");

    expect(story).toBeInTheDocument();
    expect(screen.queryByTestId("print-reel")).not.toBeInTheDocument();
    expect(screen.queryByTestId("scroll-story")).not.toBeInTheDocument();
    expect(
      Boolean(
        story.compareDocumentPosition(about) & Node.DOCUMENT_POSITION_FOLLOWING,
      ),
    ).toBe(true);
  });
});