import { render, screen } from "@testing-library/react";
import FullscreenVideoCenterCaption from "./FullscreenVideoCenterCaption";
import FullscreenVideo from "./FullscreenVideo";
import FullscreenVideoTitle from "./FullscreenVideoTitle";
import SquareVideo from "./SquareVideo";
import type { SlideRuntimeProps } from "../types/lecture";

function makeProps(
  props: SlideRuntimeProps["props"],
  displayMode: SlideRuntimeProps["displayMode"]
): SlideRuntimeProps {
  return {
    lectureId: "presentation-1",
    slideId: "slide-1",
    glitchSlideId: "slide-1-a",
    displayMode,
    props,
    paused: false
  };
}

describe("video slide templates", () => {
  it("renders the square video template", () => {
    render(
      <SquareVideo
        {...makeProps(
          {
            header: "Clip",
            videoSrc: "/clip.mp4",
            posterSrc: "/clip.jpg"
          },
          "square"
        )}
      />
    );

    const video = document.querySelector(".square-video__media");
    expect(video).toHaveAttribute("src", "/clip.mp4");
    expect(video).toHaveAttribute("poster", "/clip.jpg");
  });

  it("renders the fullscreen video template", () => {
    render(
      <FullscreenVideo
        {...makeProps(
          {
            header: "Scene",
            videoSrc: "/scene.mp4",
            posterSrc: "/scene.jpg",
            caption: "Short framing note."
          },
          "fullscreen"
        )}
      />
    );

    expect(screen.getByText("Scene")).toBeInTheDocument();
    expect(screen.getByText("Short framing note.")).toBeInTheDocument();
    const video = document.querySelector(".fullscreen-video__media");
    expect(video).toHaveAttribute("src", "/scene.mp4");
    expect(video).toHaveAttribute("poster", "/scene.jpg");
  });

  it("renders the fullscreen video title template with a default title", () => {
    render(
      <FullscreenVideoTitle
        {...makeProps(
          {
            videoSrc: "/scene.mp4",
            posterSrc: "/scene.jpg"
          },
          "fullscreen"
        )}
      />
    );

    expect(screen.getByText("No need to be discrete")).toBeInTheDocument();
    const video = document.querySelector(".fullscreen-video-title__media");
    expect(video).toHaveAttribute("src", "/scene.mp4");
    expect(video).toHaveAttribute("poster", "/scene.jpg");
  });

  it("renders the fullscreen video centered caption template", () => {
    render(
      <FullscreenVideoCenterCaption
        {...makeProps(
          {
            caption: "Center this thought",
            videoSrc: "/scene.mp4",
            posterSrc: "/scene.jpg"
          },
          "fullscreen"
        )}
      />
    );

    expect(screen.getByText("Center this thought")).toBeInTheDocument();
    const video = document.querySelector(".fullscreen-video-center-caption__media");
    expect(video).toHaveAttribute("src", "/scene.mp4");
    expect(video).toHaveAttribute("poster", "/scene.jpg");
  });
});
