import { LoadedGlitchSlide } from "./LoadedGlitchSlide";
import { FallbackSlide } from "../slides/FallbackSlide";
import { getActiveGlitchSlide, getCompatibleGlitchSlides } from "../lib/timeline";
import type { SlideRegistry, Slide } from "../types/lecture";
import type { ViewportMode } from "../types/player";

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

export function GlitchSlideRenderer({
  presentationId,
  slide,
  slideRegistry,
  viewportMode = "desktop",
  preferredGlitchSlideId,
  paused = true,
  className
}: GlitchSlideRendererProps) {
  const compatibleGlitchSlides = getCompatibleGlitchSlides(slide, viewportMode);
  const glitchSlide = getActiveGlitchSlide(
    slide,
    viewportMode,
    preferredGlitchSlideId
  );

  if (!glitchSlide || compatibleGlitchSlides.length === 0) {
    return (
      <div
        className={[
          "glitch-slide-renderer",
          `glitch-slide-renderer--${viewportMode}`,
          className
        ]
          .filter(Boolean)
          .join(" ")}
      >
        <div className={`slide-host slide-host--${slide.displayMode}`}>
          <FallbackSlide reason="No compatible slide variant available." />
        </div>
      </div>
    );
  }

  return (
    <div
      className={[
        "glitch-slide-renderer",
        `glitch-slide-renderer--${viewportMode}`,
        `lecture-player--${viewportMode}`,
        className
      ]
        .filter(Boolean)
        .join(" ")}
      data-testid={`glitch-slide-renderer-${slide.displayMode}`}
    >
      <div className={`slide-host slide-host--${slide.displayMode}`}>
        <LoadedGlitchSlide
          lectureId={presentationId}
          slide={slide}
          glitchSlide={glitchSlide}
          slideRegistry={slideRegistry}
          paused={paused}
        />
      </div>
    </div>
  );
}
