"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import {
  Children,
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
} from "react";
export interface CarouselProps extends ComponentProps<"section"> {
  label: string;
}
export function Carousel({
  children,
  label,
  className = "",
  ...props
}: CarouselProps) {
  const slides = Children.toArray(children);
  const ref = useRef<HTMLDivElement>(null);
  const id = useId();
  const [active, setActive] = useState(0);
  const index = Math.min(active, Math.max(0, slides.length - 1));
  const move = (next: number) => {
    const el = ref.current;
    if (!el) return;
    const selected = Math.max(0, Math.min(next, slides.length - 1));
    const slide = el.children[selected] as HTMLElement | undefined;
    if (slide)
      el.scrollTo({
        left: slide.offsetLeft,
        behavior: matchMedia("(prefers-reduced-motion: reduce)").matches
          ? "instant"
          : "smooth",
      });
  };
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const update = () => {
      let closest = 0,
        distance = Infinity;
      Array.from(el.children).forEach((child, i) => {
        const d = Math.abs((child as HTMLElement).offsetLeft - el.scrollLeft);
        if (d < distance) {
          closest = i;
          distance = d;
        }
      });
      setActive(closest);
    };
    const observer = new ResizeObserver(update);
    observer.observe(el);
    el.addEventListener("scroll", update, { passive: true });
    update();
    return () => {
      observer.disconnect();
      el.removeEventListener("scroll", update);
    };
  }, [slides.length]);
  return (
    <section
      {...props}
      aria-label={label}
      aria-roledescription="carousel"
      className={`ynr-carousel ${className}`}
    >
      <div
        ref={ref}
        id={id}
        className="ynr-carousel-viewport"
        tabIndex={0}
        role="group"
        aria-label="Slides"
        onKeyDown={(event) => {
          if (event.target !== event.currentTarget) return;
          const next =
            event.key === "ArrowRight"
              ? index + 1
              : event.key === "ArrowLeft"
                ? index - 1
                : event.key === "Home"
                  ? 0
                  : event.key === "End"
                    ? slides.length - 1
                    : undefined;
          if (next !== undefined) {
            event.preventDefault();
            move(next);
          }
        }}
      >
        {slides.map((slide, i) => (
          <div
            className="ynr-carousel-slide"
            role="group"
            aria-roledescription="slide"
            aria-label={`${i + 1} of ${slides.length}`}
            key={i}
          >
            {slide}
          </div>
        ))}
      </div>
      <div className="ynr-carousel-controls">
        <button
          type="button"
          className="ynr-effect-control"
          aria-label="Previous slide"
          aria-controls={id}
          disabled={index === 0}
          onClick={() => move(index - 1)}
        >
          Previous
        </button>
        <span role="status" aria-live="polite">
          {slides.length ? `${index + 1} of ${slides.length}` : "No slides"}
        </span>
        <button
          type="button"
          className="ynr-effect-control"
          aria-label="Next slide"
          aria-controls={id}
          disabled={index >= slides.length - 1}
          onClick={() => move(index + 1)}
        >
          Next
        </button>
      </div>
    </section>
  );
}