import { useState, useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import './Carousel.css'
import { motion } from 'motion/react'

export default function Carousel({ images }: { images: string[] }) {
    const [emblaRef, emblaApi] = useEmblaCarousel({
        loop: true,
        slidesToScroll: 1,
        align: 'start'
    })

    const [selectedImage, setSelectedImage] = useState<string | null>(null)

    const scrollPrev = () => emblaApi?.scrollPrev()
    const scrollNext = () => emblaApi?.scrollNext()

    // close on ESC
    useEffect(() => {
        const handler = (e: KeyboardEvent) => {
            if (e.key === 'Escape') setSelectedImage(null)
        }

        window.addEventListener('keydown', handler)
        return () => window.removeEventListener('keydown', handler)
    }, [])

    return (
        <>
            <div className="embla">
                <div className="embla__viewport" ref={emblaRef}>
                    <div className="embla__container">
                        {images.map((image, i) => (
                            <div
                                key={i}
                                className="embla__slide shrink-0 grow-0 flex basis-1/2 sm:basis-1/4 cursor-pointer"
                                onClick={() => setSelectedImage(image)}
                            >
                                <img
                                    src={image}
                                    className="w-full h-full object-cover rounded-lg"
                                />
                            </div>
                        ))}
                    </div>
                </div>

                <div className='flex flex-row gap-4 w-full justify-center mt-8'>
                    <button onClick={scrollPrev} className='cursor-pointer'>
                        <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="21" cy="21" r="21" fill="#FBFBFB" />
                            <path d="M21 0C32.598 0 42 9.40202 42 21C42 32.598 32.598 42 21 42C9.40202 42 0 32.598 0 21C0 9.40202 9.40202 0 21 0ZM20.707 14.793C20.3165 14.4024 19.6835 14.4024 19.293 14.793L13.293 20.793C12.9024 21.1835 12.9024 21.8165 13.293 22.207L19.293 28.207C19.6835 28.5976 20.3165 28.5976 20.707 28.207C21.0976 27.8165 21.0976 27.1835 20.707 26.793L16.4141 22.5H28C28.5523 22.5 29 22.0523 29 21.5C29 20.9477 28.5523 20.5 28 20.5H16.4141L20.707 16.207C21.0976 15.8165 21.0976 15.1835 20.707 14.793Z" fill="#1C8EFF" />
                        </svg>

                    </button>

                    <button onClick={scrollNext} className='cursor-pointer'>
                        <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="21" cy="21" r="21" fill="#FBFBFB" />
                            <path d="M21 0C32.598 0 42 9.40202 42 21C42 32.598 32.598 42 21 42C9.40202 42 0 32.598 0 21C0 9.40202 9.40202 0 21 0ZM22.707 14.793C22.3165 14.4024 21.6835 14.4024 21.293 14.793C20.9024 15.1835 20.9024 15.8165 21.293 16.207L25.5859 20.5H14C13.4477 20.5 13 20.9477 13 21.5C13 22.0523 13.4477 22.5 14 22.5H25.5859L21.293 26.793C20.9024 27.1835 20.9024 27.8165 21.293 28.207C21.6835 28.5976 22.3165 28.5976 22.707 28.207L28.707 22.207C29.0976 21.8165 29.0976 21.1835 28.707 20.793L22.707 14.793Z" fill="#1C8EFF" />
                        </svg>

                    </button>
                </div>
            </div>

            {/* Modal */}
            {selectedImage && (
                <motion.div
                    className="fixed inset-0 bg-black/50 backdrop-blur-xs z-50 flex items-center justify-center"
                    onClick={() => setSelectedImage(null)}
                >
                    <img
                        src={selectedImage}
                        className="max-h-screen max-w-screen object-contain"
                        onClick={(e) => e.stopPropagation()}
                    />
                </motion.div>
            )}
        </>
    )
}