import React, { useRef, useState, useEffect } from 'react';
import Autoplay from 'embla-carousel-autoplay';
import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@repo/ui/components/carousel';

interface CarouselComponentProps {
	carouselData: { id: number; image: string; title: string }[];
}

const JtCarousel: React.FC<CarouselComponentProps> = ({ carouselData }) => {
	const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
	const [currentIndex, setCurrentIndex] = useState(0);
	const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));

	// 监听轮播图变化
	useEffect(() => {
		if (!carouselAPI) return;

		const updateCurrentIndex = () => {
			setCurrentIndex(carouselAPI.selectedScrollSnap());
		};

		carouselAPI.on('select', updateCurrentIndex);

		return () => {
			carouselAPI.off('select', updateCurrentIndex);
		};
	}, [carouselAPI]);
		
	// 滚动到指定索引
	const scrollToIndex = (index: number) => {
		if (carouselAPI) {
			carouselAPI.scrollTo(index);
			setCurrentIndex(index);
		}
	};

	return (
		<div className="relative w-full h-full">
			<Carousel
				className="h-full w-full"
				setApi={setCarouselAPI}
				plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
				onMouseEnter={plugin.current.stop}
				onMouseLeave={plugin.current.reset}
			>
				<CarouselContent>
					{carouselData.map((item) => (
						<CarouselItem key={item.id}>
							<div className="h-full w-full relative">
								{/* 设置为100%宽高 */}
								<img src={item.image} alt={item.title} className="w-full h-full object-cover  " />
							</div>
						</CarouselItem>
					))}
				</CarouselContent>
			</Carousel>

			{/* 圆点指示器 */}
			<div className="absolute bottom-5 left-10 flex justify-center ">
				{carouselData.map((_, index) => (
					<button
						key={index}
						className={`w-3 h-3 rounded-full mx-1 ${currentIndex === index ? 'bg-blue-500' : 'bg-white'}`}
						onClick={() => scrollToIndex(index)}
					/>
				))}
			</div>
		</div>
	);
};

export default JtCarousel;