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

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

describe("GlitchComponentFrame", () => {
  it("resolves a default hosted glitch component path from component id", () => {
    render(
      <GlitchComponentFrame
        {...makeProps({
          header: "Interactive model",
          componentId: "voxel-universe",
          caption: "Rotate and inspect the geometry."
        })}
      />
    );

    expect(screen.getByText("Interactive model")).toBeInTheDocument();
    expect(screen.getByText("voxel-universe")).toBeInTheDocument();
    expect(screen.getByTitle("Interactive model")).toHaveAttribute(
      "src",
      "/glitch/glitch_voxel_universe/index.html"
    );
  });

  it("renders an iframe for a hosted glitch component", () => {
    render(
      <GlitchComponentFrame
        {...makeProps({
          header: "Interactive model",
          componentId: "lightlane",
          componentUrl: "https://example.com/lightlane",
          caption: "Rotate and inspect the geometry."
        })}
      />
    );

    expect(screen.getByText("Interactive model")).toBeInTheDocument();
    expect(screen.getByText("lightlane")).toBeInTheDocument();
    expect(
      screen.getByTitle("Interactive model")
    ).toHaveAttribute("src", "https://example.com/lightlane");
  });
});
