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

interface GlitchSlideCarouselProps {
  candidates: GlitchSlide[];
  displayMode: Slide["displayMode"];
  activeGlitchSlide: GlitchSlide;
  isInspecting: boolean;
  isDragging: boolean;
  viewportMode: ViewportMode;
}

export function GlitchSlideCarousel({
  candidates,
  displayMode,
  activeGlitchSlide,
  isInspecting,
  isDragging,
  viewportMode
}: GlitchSlideCarouselProps) {
  if (candidates.length <= 1) {
    return null;
  }

  const activeIndex = candidates.findIndex(
    (candidate) => candidate.id === activeGlitchSlide.id
  );
  const browseAxis = getBrowseAxis(viewportMode);


  return (
    <div
      className={`carousel-hud ${isInspecting ? "carousel-hud--inspect" : ""}`}
      aria-live="polite"
    >
  

      <div className="carousel-hud__track" aria-label="Glitch slide candidates">
        {candidates.map((candidate, index) => (
          <span
            key={candidate.id}
            className={`carousel-hud__dot ${
              candidate.id === activeGlitchSlide.id ? "carousel-hud__dot--active" : ""
            }`}
            title={`${candidate.id} (${Math.round(candidate.score * 100)} score)`}
          >
            {index + 1}
          </span>
        ))}
      </div>

      {isInspecting ? (
        <div className="carousel-hud__detail">
          <div className="carousel-hud__header">
            <span>{displayMode === "fullscreen" ? "Fullscreen" : "Square"}</span>
            <span>{isDragging ? "Browsing alternates" : "Inspecting"}</span>
          </div>

          {activeGlitchSlide.authorName ? (
            <p className="carousel-hud__author">By {activeGlitchSlide.authorName}</p>
          ) : null}

          <div className="carousel-hud__footer">
            <strong>{activeGlitchSlide.id}</strong>
            <span>
              {activeIndex + 1}/{candidates.length}
            </span>
          </div>
        </div>
      ) : null}
    </div>
  );
}
