import { GlitchSlideRenderer } from "./GlitchSlideRenderer";
import { getActiveGlitchSlide } from "../lib/timeline";
import type { Slide, SlideRegistry } from "../types/lecture";
import type { ViewportMode } from "../types/player";

export interface GlitchSlideThumbnailProps {
  presentationId: string;
  slide: Slide;
  slideRegistry: SlideRegistry;
  viewportMode?: ViewportMode;
  preferredGlitchSlideId?: string;
  className?: string;
  showSquareHeader?: boolean;
}

export function GlitchSlideThumbnail({
  presentationId,
  slide,
  slideRegistry,
  viewportMode = "desktop",
  preferredGlitchSlideId,
  className,
  showSquareHeader = true
}: GlitchSlideThumbnailProps) {
  const activeGlitchSlide = getActiveGlitchSlide(
    slide,
    viewportMode,
    preferredGlitchSlideId
  );
  const squareHeader =
    showSquareHeader &&
    slide.displayMode === "square" &&
    activeGlitchSlide?.componentKey === "SquareYellow" &&
    typeof (activeGlitchSlide.props as { header?: unknown }).header === "string"
      ? String((activeGlitchSlide.props as { header: string }).header)
      : null;

  return (
    <div
      className={[
        "glitch-slide-thumbnail",
        `glitch-slide-thumbnail--${slide.displayMode}`,
        `glitch-slide-thumbnail--${viewportMode}`,
        className
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {squareHeader ? (
        <div className="glitch-slide-thumbnail__header">{squareHeader}</div>
      ) : null}
      <div className="glitch-slide-thumbnail__surface">
        <GlitchSlideRenderer
          presentationId={presentationId}
          slide={slide}
          slideRegistry={slideRegistry}
          viewportMode={viewportMode}
          preferredGlitchSlideId={preferredGlitchSlideId}
          paused
        />
      </div>
    </div>
  );
}
