import { fireEvent, render, screen } from "@testing-library/react";
import { getShowcaseAssets } from "@/lib/project-showcase";
import { coverSizes } from "./CaseCover";
import { CaseCoverLink } from "./CaseCoverLink";
import { getCaseMedia } from "./case-media";

/**
 * Testes de caminhos-base de CaseCoverLink: sem captura (nada), com captura (link fora da leitura e do teclado,
 * com a capa dentro), os valores padrão de `sizes` e `priority`, o pré-carregamento só ao chegar no link
 * e os valores dados.
 */

jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
jest.mock("next/link", () => ({
  __esModule: true,
  default: ({
    children,
    prefetch,
    ...props
  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
    string,
    unknown
  >) => (
    <a data-prefetch={String(prefetch)} {...props}>
      {children}
    </a>
  ),
}));

const mockedGetCaseMedia = jest.mocked(getCaseMedia);
const props = {
  id: "sev-modaintima",
  title: "SEV Moda Íntima",
  demoUrl: "https://sevmodaintima.com.br",
};

afterEach(() => {
  mockedGetCaseMedia.mockReset();
});

describe("CaseCoverLink", () => {
  it("path: no desktop capture -> renders nothing, not even the link", () => {
    mockedGetCaseMedia.mockReturnValue(undefined);
    const { container } = render(<CaseCoverLink {...props} />);

    expect(container).toBeEmptyDOMElement();
    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
  });

  it("path: capture found -> a link to the case, out of reading order and tab order, around the cover", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    const { container } = render(<CaseCoverLink {...props} />);

    const link = container.querySelector("a");
    expect(link).toHaveAttribute("href", `/cases/${props.id}`);
    expect(link).toHaveAttribute("aria-hidden", "true");
    expect(link).toHaveAttribute("tabindex", "-1");
    expect(link?.querySelector(".ds-bframe-url")).toHaveTextContent(
      "sevmodaintima.com.br",
    );
    expect(
      screen.getByAltText(`Captura de tela do site ${props.title}`),
    ).toBeInTheDocument();
  });

  it("path: sizes and priority omitted -> default sizes and lazy image", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<CaseCoverLink {...props} />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    expect(image).toHaveAttribute("sizes", coverSizes.card);
    expect(image).toHaveAttribute("loading", "lazy");
    expect(image).not.toHaveAttribute("fetchpriority");
  });

  it("path: link -> pre-fetches the case only when the pointer or focus reaches it", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    const { container } = render(<CaseCoverLink {...props} />);

    const link = container.querySelector("a");
    expect(link).toHaveAttribute("data-prefetch", "false");
    fireEvent.mouseEnter(link as HTMLAnchorElement);
    expect(link).toHaveAttribute("data-prefetch", "null");
  });

  it("path: sizes and priority given -> both are used", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<CaseCoverLink {...props} sizes="320px" priority />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    expect(image).toHaveAttribute("sizes", "320px");
    expect(image).toHaveAttribute("loading", "eager");
    expect(image).toHaveAttribute("fetchpriority", "high");
  });

  it("path: no demo address -> the browser bar falls back to the project title", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    const { container } = render(
      <CaseCoverLink id={props.id} title={props.title} demoUrl={null} />,
    );

    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      props.title,
    );
  });
});