Carousel

"use client";

import {
  Children,
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type ReactNode,
} from "react";
import { Button } from "./button";
import "./carousel.css";

type SlideState = { index: number; count: number; hidden: boolean | null; id: string };

const SlideContext = createContext<SlideState | null>(null);

export type CarouselProps = Omit<ComponentProps<"section">, "children"> & {
  /** Names the carousel, e.g. "Plans". */
  label: string;
  /** Previous on the first slide goes to the last, and next on the last to the first. */
  loop?: boolean;
  /** Slides shown at once. "auto" lets each slide keep its own width. */
  slidesPerView?: number | "auto";
  gap?: "s" | "m" | "l";
  children: ReactNode;
};

function Chevron({ back }: { back?: boolean }) {
  return (
    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={back ? "M10 3.5 5.5 8l4.5 4.5" : "M6 3.5 10.5 8 6 12.5"} />
    </svg>
  );
}

/**
 * A row of slides that scrolls natively with scroll snap. Buttons and the
 * slide picker only call scrollBy; an IntersectionObserver reports which
 * slides are in view. It never moves on its own.
 */
export function Carousel({
  label,
  loop = false,
  slidesPerView = 1,
  gap = "m",
  className,
  style,
  children,
  ...rest
}: CarouselProps) {
  const baseId = useId();
  const viewportRef = useRef<HTMLDivElement>(null);
  const slides = Children.toArray(children).filter(isValidElement);
  const count = slides.length;
  const [visible, setVisible] = useState<boolean[] | null>(null);
  const [current, setCurrent] = useState(0);
  const [edges, setEdges] = useState({ start: true, end: count <= 1 });

  function readEdges() {
    const viewport = viewportRef.current;
    if (!viewport) return;
    const offset = Math.abs(viewport.scrollLeft);
    const max = viewport.scrollWidth - viewport.clientWidth;
    const start = offset <= 1;
    const end = offset >= max - 1;
    setEdges((prev) => (prev.start === start && prev.end === end ? prev : { start, end }));
  }

  useEffect(() => {
    const viewport = viewportRef.current;
    if (!viewport) return;
    const items = Array.from(viewport.children).filter((el) => el.classList.contains("eq-carousel-slide"));
    const ratios = items.map(() => 0);
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          const i = items.indexOf(entry.target);
          if (i >= 0) ratios[i] = entry.intersectionRatio;
        }
        const next = ratios.map((r) => r >= 0.5);
        const first = next.indexOf(true);
        if (first >= 0) setCurrent(first);
        setVisible((prev) =>
          prev && prev.length === next.length && prev.every((v, i) => v === next[i]) ? prev : next,
        );
      },
      { root: viewport, threshold: [0, 0.5, 0.99] },
    );
    for (const item of items) observer.observe(item);
    readEdges();
    const resize = new ResizeObserver(readEdges);
    resize.observe(viewport);
    return () => {
      observer.disconnect();
      resize.disconnect();
    };
  }, [count]);

  function scrollToSlide(index: number) {
    const viewport = viewportRef.current;
    if (!viewport) return;
    const items = Array.from(viewport.children).filter((el) => el.classList.contains("eq-carousel-slide"));
    const target = items[index];
    if (!target) return;
    const rtl = getComputedStyle(viewport).direction === "rtl";
    const box = viewport.getBoundingClientRect();
    const slide = target.getBoundingClientRect();
    const left = rtl ? slide.right - box.right : slide.left - box.left;
    const still = getComputedStyle(viewport).getPropertyValue("--eq-dur-move").trim().startsWith("0");
    viewport.scrollBy({ left, behavior: still ? "instant" : "smooth" });
  }

  function step(direction: 1 | -1) {
    if (count === 0) return;
    const atEdge = direction === 1 ? edges.end : edges.start;
    if (atEdge && !loop) return;
    if (atEdge) {
      scrollToSlide(direction === 1 ? 0 : count - 1);
      return;
    }
    scrollToSlide(Math.min(count - 1, Math.max(0, current + direction)));
  }

  const perView = slidesPerView === "auto" ? undefined : Math.max(1, slidesPerView);

  return (
    <section
      aria-roledescription="carousel"
      aria-label={label}
      {...rest}
      className={["eq-carousel", className].filter(Boolean).join(" ")}
      data-gap={gap}
      data-per-view={slidesPerView === "auto" ? "auto" : undefined}
      style={perView ? ({ ...style, "--_per": perView } as CSSProperties) : style}
    >
      <div
        ref={viewportRef}
        id={`${baseId}-viewport`}
        className="eq-carousel-viewport"
        tabIndex={0}
        aria-label="Slides"
        role="group"
        onScroll={readEdges}
      >
        {slides.map((slide, index) => (
          <SlideContext.Provider
            key={slide.key ?? index}
            value={{
              index,
              count,
              hidden: visible ? !visible[index] : null,
              id: `${baseId}-slide-${index}`,
            }}
          >
            {slide}
          </SlideContext.Provider>
        ))}
      </div>
      {count > 1 && (
        <div className="eq-carousel-controls">
          <Button
            variant="ghost"
            size="s"
            className="eq-carousel-nav"
            aria-label="Previous slide"
            aria-controls={`${baseId}-viewport`}
            aria-disabled={(!loop && edges.start) || undefined}
            lead={<Chevron back />}
            onClick={() => step(-1)}
          />
          <div className="eq-carousel-picker" role="group" aria-label="Choose slide">
            {slides.map((slide, index) => {
              const name = (slide.props as { label?: unknown }).label;
              return (
                <button
                  key={slide.key ?? index}
                  type="button"
                  className="eq-carousel-dot"
                  aria-label={typeof name === "string" ? name : `Slide ${index + 1}`}
                  aria-controls={`${baseId}-slide-${index}`}
                  aria-current={index === current || undefined}
                  onClick={() => scrollToSlide(index)}
                />
              );
            })}
          </div>
          <span className="eq-carousel-status" aria-live="polite" aria-atomic="true">
            {current + 1} of {count}
          </span>
          <Button
            variant="ghost"
            size="s"
            className="eq-carousel-nav"
            aria-label="Next slide"
            aria-controls={`${baseId}-viewport`}
            aria-disabled={(!loop && edges.end) || undefined}
            lead={<Chevron />}
            onClick={() => step(1)}
          />
        </div>
      )}
    </section>
  );
}

export type CarouselSlideProps = ComponentProps<"div"> & {
  /** Names the slide and its picker dot. Defaults to its position, "2 of 5". */
  label?: string;
};

export function CarouselSlide({ label, className, ...rest }: CarouselSlideProps) {
  const slide = useContext(SlideContext);
  return (
    <div
      role="group"
      aria-roledescription="slide"
      aria-label={label ?? (slide ? `${slide.index + 1} of ${slide.count}` : undefined)}
      id={slide?.id}
      inert={slide?.hidden ?? undefined}
      {...rest}
      className={["eq-carousel-slide", className].filter(Boolean).join(" ")}
    />
  );
}