import { FC, useState, useRef } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { ServiceDetailDataType } from '../types/ServiecTypes'
import { Play, Pause } from 'iconsax-react'

const SWIPER_SLIDE_STYLE = {
    overflow: 'visible !important',
    // width: 220,
}

type Props = {
    item: ServiceDetailDataType
}

const ServiceImages: FC<Props> = ({ item }) => {
    const [playingVideos, setPlayingVideos] = useState<{ [key: string]: boolean }>({})
    const videoRefs = useRef<{ [key: string]: HTMLVideoElement | null }>({})

    const toggleVideo = (videoId: string) => {
        const video = videoRefs.current[videoId]
        if (!video) return

        if (playingVideos[videoId]) {
            video.pause()
            setPlayingVideos(prev => ({
                ...prev,
                [videoId]: false
            }))
        } else {
            video.play()
            setPlayingVideos(prev => ({
                ...prev,
                [videoId]: true
            }))
        }
    }

    const handleVideoPlay = (videoId: string) => {
        setPlayingVideos(prev => ({
            ...prev,
            [videoId]: true
        }))
    }

    const handleVideoPause = (videoId: string) => {
        setPlayingVideos(prev => ({
            ...prev,
            [videoId]: false
        }))
    }

    return (
        <div className='w-full mt-8'>
            <Swiper
                className='w-full'
                spaceBetween={20} // فاصله پیش‌فرض بین اسلایدها
                slidesPerView='auto'
            >
                {/* نمایش ویدیوها */}
                {item?.videos?.map((video) => (
                    <SwiperSlide key={video.id} className='xl:max-w-[38%] max-w-[80%]' style={SWIPER_SLIDE_STYLE}>
                        <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl relative'>
                            <video
                                ref={(el) => {
                                    videoRefs.current[video.id] = el
                                }}
                                src={video.videoUrl}
                                className='w-full rounded-2xl'
                                controls={false}
                                loop
                                playsInline
                                onPlay={() => handleVideoPlay(video.id)}
                                onPause={() => handleVideoPause(video.id)}
                            />
                            <button
                                onClick={() => toggleVideo(video.id)}
                                className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white rounded-full p-3 transition-all duration-200'
                            >
                                {playingVideos[video.id] ? (
                                    <Pause size={24} color='white' />
                                ) : (
                                    <Play size={24} color='white' />
                                )}
                            </button>
                        </div>
                    </SwiperSlide>
                ))}

                {/* نمایش تصاویر */}
                {item?.images?.map((image) => (
                    <SwiperSlide key={image.id} className='xl:max-w-[38%] max-w-[80%]' style={SWIPER_SLIDE_STYLE}>
                        <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                            <img src={image.imageUrl} className='w-full rounded-2xl' />
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    )
}

export default ServiceImages