import { render, screen, within } from "@testing-library/react";
import HeroWork from "./HeroWork";

/**
 * Os pôsteres do hero: pelo next/image com `sizes` do tamanho em que aparecem, sempre lazy e com prioridade baixa
 * (o título é o LCP), e a moldura de celular pequena para as telas abaixo de 1024 px.
 */

const original = (image: Element) =>
  new URL(image.getAttribute("src") ?? "", "http://localhost").searchParams.get(
    "url",
  );

describe("HeroWork: pôsteres no tamanho certo", () => {
  it("serves the three posters through the image optimizer, each with a `sizes` that matches how it shows", () => {
    render(<HeroWork />);

    const desktop = within(screen.getByTestId("hero-work")).getAllByRole("img");
    expect(desktop).toHaveLength(2);
    expect(original(desktop[0])).toBe("/videos/sev-modaintima/desktop.webp");
    expect(original(desktop[1])).toBe("/videos/as-servicos/mobile.webp");
    // 1440x900 e 390x844 cheios para quadros de ~491x307 e ~130x299 era banda de sobra
    expect(desktop[0]).toHaveAttribute(
      "sizes",
      "(min-width: 1400px) 500px, 36vw",
    );
    expect(desktop[1]).toHaveAttribute(
      "sizes",
      "(min-width: 1400px) 136px, 10vw",
    );

    const small = within(screen.getByTestId("hero-work-mobile")).getByRole(
      "img",
    );
    expect(original(small)).toBe("/videos/sev-modaintima/mobile.webp");
    expect(small).toHaveAttribute("sizes", "84px");
  });

  it("keeps the dimensions of the files, so the frames reserve their space before the images load", () => {
    render(<HeroWork />);

    const [browser, phone] = within(
      screen.getByTestId("hero-work"),
    ).getAllByRole("img");
    expect(browser).toHaveAttribute("width", "1440");
    expect(browser).toHaveAttribute("height", "900");
    expect(phone).toHaveAttribute("width", "390");
    expect(phone).toHaveAttribute("height", "844");
  });

  it("never asks for a high priority: lazy, low fetch priority and no preload, so the headline stays the LCP", () => {
    const { container } = render(<HeroWork />);

    const images = container.querySelectorAll("img");
    expect(images).toHaveLength(3);
    for (const image of images) {
      expect(image).toHaveAttribute("loading", "lazy");
      expect(image).toHaveAttribute("fetchpriority", "low");
    }
    // sem <link rel="preload">: o next/image só o insere com `preload` (ou fetchPriority="high")
    expect(document.head.querySelector('link[rel="preload"]')).toBeNull();
  });
});

describe("HeroWork: moldura de celular pequena", () => {
  it("shows a 180px phone with the SEV mobile poster only below 1024px, while the column stays desktop-only", () => {
    render(<HeroWork />);

    const column = screen.getByTestId("hero-work");
    expect(column).toHaveClass("hidden", "lg:block");

    const small = screen.getByTestId("hero-work-mobile");
    expect(small).toHaveClass("lg:hidden");
    const phone = small.querySelector(".ds-phone") as HTMLElement;
    expect(phone.style.height).toBe("180px");
    expect(phone).toContainElement(within(small).getByRole("img"));
    expect(within(small).getByRole("img")).toHaveAccessibleName(
      "Site da SEV Moda Íntima aberto no celular",
    );
    expect(
      within(small).getByText(/Site da SEV Moda Íntima, como aparece/),
    ).toBeInTheDocument();
  });

  it("is not interactive: the frames only show the work", () => {
    render(<HeroWork />);

    expect(screen.queryByRole("link")).toBeNull();
    expect(screen.getByTestId("hero-work-mobile")).toHaveClass(
      "pointer-events-none",
    );
    expect(screen.getByTestId("hero-work")).toHaveClass("pointer-events-none");
  });

  it("passes the address to the browser bar of the desktop frame", () => {
    render(<HeroWork url={{ text: "sevmodaintima.com.br", secure: true }} />);

    expect(
      within(screen.getByTestId("hero-work")).getByText("sevmodaintima.com.br"),
    ).toBeInTheDocument();
  });
});