import { getBrowseAxis } from "../lib/gestureController";
import { LoadedGlitchSlide } from "./LoadedGlitchSlide";
import type {
  GlitchSlide,
  Slide,
  SlideRegistry
} from "../types/lecture";
import type { ViewportMode } from "../types/player";

interface SlideOverlayHostProps {
  lectureId: string;
  slide: Slide;
  glitchSlide: GlitchSlide;
  candidates: GlitchSlide[];
  slideRegistry: SlideRegistry;
  paused: boolean;
  isInspecting: boolean;
  isSettling: boolean;
  viewportMode: ViewportMode;
  dragBaselineGlitchSlideId: string | null;
  dragOffsetPx: number;
  onMediaLoadingChange?: (isLoading: boolean) => void;
}

export function SlideOverlayHost({
  lectureId,
  slide,
  glitchSlide,
  candidates,
  slideRegistry,
  paused,
  isInspecting,
  isSettling,
  viewportMode,
  dragBaselineGlitchSlideId,
  dragOffsetPx,
  onMediaLoadingChange
}: SlideOverlayHostProps) {
  const browseAxis = getBrowseAxis(viewportMode);
  const activeIndex = candidates.findIndex(
    (candidate) => candidate.id === glitchSlide.id
  );
  const baselineIndex = candidates.findIndex(
    (candidate) => candidate.id === dragBaselineGlitchSlideId
  );
  const shouldRenderTrack = candidates.length > 1;
  const trackAnchorIndex =
    isInspecting && baselineIndex !== -1 ? baselineIndex : Math.max(activeIndex, 0);
  const trackOffsetPx = isInspecting ? dragOffsetPx : 0;
  const trackTransform =
    browseAxis === "horizontal"
      ? `translate3d(calc(${-trackAnchorIndex * 100}% + ${trackOffsetPx}px), 0, 0)`
      : `translate3d(0, calc(${-trackAnchorIndex * 100}% + ${trackOffsetPx}px), 0)`;

  return (
    <div
      className={`slide-host slide-host--${slide.displayMode} ${
        isInspecting ? "slide-host--inspect" : ""
      }`}
      data-testid={`slide-host-${slide.displayMode}`}
    >
      {shouldRenderTrack ? (
        <div className="slide-host__viewport">
          <div
            className={`slide-host__track slide-host__track--${browseAxis} ${
              isSettling ? "slide-host__track--settling" : ""
            }`}
            style={{ transform: trackTransform }}
          >
            {candidates.map((candidate) => (
              <div
                key={candidate.id}
                className={`slide-host__item ${
                  candidate.id === glitchSlide.id ? "slide-host__item--active" : ""
                }`}
              >
                <LoadedGlitchSlide
                  lectureId={lectureId}
                  slide={slide}
                  glitchSlide={candidate}
                  slideRegistry={slideRegistry}
                  paused={paused || candidate.id !== glitchSlide.id}
                  onMediaLoadingChange={
                    candidate.id === glitchSlide.id ? onMediaLoadingChange : undefined
                  }
                />
              </div>
            ))}
          </div>
        </div>
      ) : (
        <LoadedGlitchSlide
          lectureId={lectureId}
          slide={slide}
          glitchSlide={glitchSlide}
          slideRegistry={slideRegistry}
          paused={paused}
          onMediaLoadingChange={onMediaLoadingChange}
        />
      )}
    </div>
  );
}
