import { useEffect, useState } from 'react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Genre from './Genre'

const baseURL = 'https://api.themoviedb.org/3'
const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
    const [content, setContent] = useState()
    const [video, setVideo] = useState()
  const [similarMovies, setSimilarMovies] = useState()
  useEffect(() => {
    fetch(`${baseURL}/movie/${modalContent?.id}/similar?api_key=${API_KEY}`).then(res => res.json()).then((data) => {
    setSimilarMovies(data.results)
    })
  }, [modalContent])
  useEffect(() => {
    if (modalContent) {
      console.log(baseURL);
      console.log(modalContent.media_type);
      console.log(modalContent.id);
   fetch(`${baseURL}/${modalContent.media_type}/${modalContent.id}/videos?api_key=${API_KEY}`)
        .then((res) => res.json())
        .then((data) => {
          console.log('VIDEOS DATA', data.results[0].key)
          setVideo(data.results[0].key)
        })
}
  }, [modalContent])
    return (
        <div
            className={`backdrop-blur-[2px] fixed inset-0 z-50 bg-black/40 flex items-center justify-center ${modalVisible ? '' : 'hidden'
                }`}  onClick={(e) => e.target === e.currentTarget && setModalVisible(false)}
        >
            <div className="flex flex-col bg-transparent shadow-2xl rounded-xl z-100">
                                    {modalVisible && (
              <iframe
                className={'w-full bg-black'}
                width="420"
                height="315"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                src={`https://www.youtube.com/embed/${video}?autoplay=1`}
              ></iframe>
            )}
                    <div className={'px-8 py-4 w-[600px] bg-gray-800'}>
                    <Genre id={modalContent?.id} />
                        <h3 className={'text-xl'}>{modalContent?.original_name}{modalContent?.original_title}</h3>
                        <p className='w-full break-words h-[70px] overflow-y-auto'>{modalContent?.overview}</p>
        <hr className='my-4'/>
	<div className='relative'>
	<div className="absolute left-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-r from-gray-800"></div>
	<div className="absolute right-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-l from-gray-800"></div>
        <div className='flex flex-row overflow-x-auto gap-8 relative'>
                            {
                            similarMovies?.map((movie, index) => (


                    <div
                        className={`
                            shrink-0 bg-contain bg-no-repeat w-[150px] h-[112px] bg-center z-40 ${movie?.backdrop_path === null ? 'hidden' : '' }
                        `}
                        style={{
                            backgroundImage: `url(https://image.tmdb.org/t/p/original${movie?.backdrop_path})`,
                        }}
                    ></div>
                            ))} 
                        </div>
                    </div>
                    </div>
            </div>
        </div>
    )
}
export default Modal