const {useEffect,useState,useRef} = React
const URL = `https://www.reddit.com/r/aww/top/.json?t=all`

const App = () => {
  const [images, setImages] = useState([])
  const [errorImg, setErrorImg] = useState("")
  const [slide,setSlide] = useState(0)
  
  const handleNext = ()=> {
    setSlide(prev => prev === images.length-1 ? 0: prev+1)
  }
   const handlePrev = ()=> {
    setSlide(prev => prev === 0 ? images.length-1: prev-1)
  }
  
  if(errorImg.length > 0){
    <p>{`Error Fetching images ${errorImg}`}</p>
  }
  useEffect(()=>{
    console.log("ONCE FETCH")
    fetch(URL).then(res => res.json()).then(final => {
      const data = final.data.children.map(o => o.data.url_overridden_by_dest).filter(url => url.slice(-4) === ".jpg")
      setImages(data)
    }).catch(err  => setErrorImg(err))
  },[])
  
  const ref = useRef()
  useEffect(()=>{
    console.log("Always")
    ref.current = handleNext
  })
  useEffect(()=>{
    console.log("SET INTERVAL ONE")
    
    if(ref.current != null){
       const id = setInterval(()=>{
         ref.current()
       },3000)
    }
    return ()=> clearInterval(id)
  },[])
  
  const imageData = images.length === 0 ? <p>Loading...</p> : images.map((img,idx) => <img src={img} alt="response img" key={img} className={`carousel-img ${idx === slide ? "active":""}`}/>)
  return <div className="carousel-container">
    <button onClick={handleNext} className="carousel-btn next">&#8667;</button>
    <button  onClick={handlePrev} className="carousel-btn prev">&#8666;</button>
    {imageData}
  </div>
}

ReactDOM.render(<App />, document.getElementById('app'));