import { render, screen } from "@testing-library/react";
import { GlitchSlideRenderer } from "./GlitchSlideRenderer";
import { GlitchSlideThumbnail } from "./GlitchSlideThumbnail";
import type {
  Slide,
  SlideRegistry,
  SlideRuntimeProps
} from "../types/lecture";

const registry: SlideRegistry = {
  EquationFocus: async () => ({
    default: function MockEquationSlide({ glitchSlideId }: SlideRuntimeProps) {
      return <div>{glitchSlideId}</div>;
    }
  }),
  SquareYellow: async () => ({
    default: function MockSquareSlide({ glitchSlideId }: SlideRuntimeProps) {
      return <div>{glitchSlideId}</div>;
    }
  })
};

describe("GlitchSlideRenderer", () => {
  it("renders the viewport-compatible candidate for the requested mode", async () => {
    const slide: Slide = {
      id: "slide-1",
      startTimeSec: 0,
      displayMode: "fullscreen",
      glitchSlides: [
        {
          id: "slide-1-desktop",
          score: 0.5,
          componentKey: "EquationFocus",
          props: { title: "Desktop" },
          orientation: "desktop"
        },
        {
          id: "slide-1-portrait",
          score: 0.9,
          componentKey: "EquationFocus",
          props: { title: "Portrait" },
          orientation: "mobile-portrait"
        }
      ]
    };

    render(
      <GlitchSlideRenderer
        presentationId="presentation-1"
        slide={slide}
        slideRegistry={registry}
        viewportMode="mobile-portrait"
      />
    );

    expect(await screen.findByText("slide-1-portrait")).toBeInTheDocument();
  });

  it("respects a preferred glitch slide id when it is compatible", async () => {
    const slide: Slide = {
      id: "slide-2",
      startTimeSec: 0,
      displayMode: "fullscreen",
      glitchSlides: [
        {
          id: "slide-2-a",
          score: 0.95,
          componentKey: "EquationFocus",
          props: { title: "A" },
          orientation: "desktop"
        },
        {
          id: "slide-2-b",
          score: 0.1,
          componentKey: "EquationFocus",
          props: { title: "B" },
          orientation: "desktop"
        }
      ]
    };

    render(
      <GlitchSlideRenderer
        presentationId="presentation-1"
        slide={slide}
        slideRegistry={registry}
        viewportMode="desktop"
        preferredGlitchSlideId="slide-2-b"
      />
    );

    expect(await screen.findByText("slide-2-b")).toBeInTheDocument();
  });
});

describe("GlitchSlideThumbnail", () => {
  it("shows the square-slide header above the thumbnail surface", async () => {
    const slide: Slide = {
      id: "slide-3",
      startTimeSec: 0,
      displayMode: "square",
      glitchSlides: [
        {
          id: "slide-3-a",
          score: 0.7,
          componentKey: "SquareYellow",
          props: {
            header: "Mean",
            imageSrc: "/mean.png",
            imageAlt: "Mean"
          }
        }
      ]
    };

    render(
      <GlitchSlideThumbnail
        presentationId="presentation-1"
        slide={slide}
        slideRegistry={registry}
      />
    );

    expect(screen.getByText("Mean")).toBeInTheDocument();
    expect(await screen.findByText("slide-3-a")).toBeInTheDocument();
  });
});
