import { link } from 'fs'
import Link from 'next/link'
import { BellIcon, MagnifyingGlassIcon, PlayIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
import { InformationCircleIcon} from '@heroicons/react/24/outline'
import { useEffect, useState } from 'react'
import requests from '../../../services/requests'
import Image from "next/image"
import PreviewCard from '@prueba/components/PreviewCard'

// import NetflixLogo from '../../../public/images/netflix_logo.svg'
const baseURL ='https://api.themoviedb.org/3/'
const imageURL = 'https://image.tmdb.org/t/p/original'

export default function Home() {
  const [heroMovie, setHeroMovie] = useState()
  const [trendingMovies, setTrendingMovies] = useState()
  useEffect(() => {
    fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {
      console.log(data.results)
      setHeroMovie(data.results[3])
    })
  }, [])
  useEffect(() => {
    fetch(`${baseURL}${requests.fetchTrending}`).then(res => res.json()).then((data) => {
      setTrendingMovies(data.results)
    })
  }, [])

  return (
    <div className="flex flex-col text-white justify-between gap-10 h-screen">
      <header className='flex justify-between pt-3 px-8 z-10 text-xs'>
        <div className='flex items-center gap-4'>
          <img className='scale-[65%] mr-4' src="../images/netflix_logo.svg" alt="SVG image"/> 
          <a className='text-white font-bold'>Home</a>
          <a className='text-white'>TV Shows</a>
          <a className='text-white'>Movies</a>
          <a className='text-white'>News & Popular</a>
          <a className='text-white'>My List</a>
          <a className='text-white'>Browse by Language</a>
        </div>
        <div className='flex items-center gap-4'>
          <MagnifyingGlassIcon className='h-4 w-4'/>
          <a className='text-white'>Kids</a>
          <BellIcon className='h-4 w-4'/>
          <div className='h-8 w-8'>
              <Link href='../' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
                <img src='https://avatars.dicebear.com/api/male/124.svg' alt=""/>
              </Link>
          </div>
          <ArrowSmallDownIcon className='h-4 w-4'/>
        </div>
      </header>
        <section className='w-1/3 ml-10'>
          <div className='flex items-center'>
            <img className='scale-[65%] mr-5' src="../images/N.svg" alt="SVG image"/> 
            <h1 className='text-sm font-mono tracking-[.4rem]'>MOVIES</h1>
          </div>
          <div className='h-fit text-[3rem]'>
              {heroMovie?.original_title}
          </div>
          <div className='flex items-center'>
            <img className='scale-[45%]' src="../images/Top10.svg" alt="SVG image"/> 
            <h2 className='font-bold'>#1 in TV Shows Today</h2>
          </div>
          <div>
            <p className=' text-sm break-words text-justify'>
              {heroMovie?.overview}
            </p>
          </div>
          <div className='flex gap-4 mt-4'>
            <button className='flex items-center p-4 h-10 bg-white text-black text-xl justify-center font-semibold ring-black ring-offset-10 hover:ring-4 rounded'>
              <PlayIcon className='h-6 w-6 mr-2'/>Play
            </button>
            <button className='flex items-center p-4 h-10 bg-gray-700/80 justify-center ring-white hover:ring-4 rounded'>
              <InformationCircleIcon className='h-6 w-6 mr-2'/>More Info
            </button>
          </div>
        </section>
        <section className=' ml-10 mb-10 z-10'>
          <h2>Popular on Netflix</h2>
          <div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-5 pl-10 -ml-10'>
            {
              trendingMovies?.map((movie, index) => (
                <PreviewCard key={index} movie={movie}/>
            ))} 
          </div>
        </section>
      <div className='absolute h-full w-full bg-contain bg-center -z-20 bg-right' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
      <div className='absolute w-full h-32 -z-10 bg-gradient-to-b from-black'></div>
      <div className='absolute bottom-0 w-full h-20 -z-10 bg-gradient-to-t from-black'></div>
      <div className='absolute w-2/3 h-full -z-10 bg-gradient-to-r from-black'></div>
    </div>
  )
}