{"size": 1551, "ext": "js", "max_stars_repo_path": "components/image-with-cover.js", "max_stars_repo_name": "lwz7512/next-letspy-today", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/image-with-cover.js", "max_issues_repo_name": "lwz7512/next-letspy-today", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/image-with-cover.js", "max_forks_repo_name": "lwz7512/next-letspy-today", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.4782608696, "max_line_length": 75, "alphanum_fraction": 0.5132172792}
import React, { useState, useEffect, useRef } from 'react'
import Image from 'next/image'


const ImageWithCover = ({ coverImgStr, imgSrc, imgNight, altName }) => {

  const [loaded, setLoaded] = useState(false)
  const timeRef = useRef(0)

  const [isNight, setIsNight] = useState(false)

  useEffect(() => {
    const darkMode = new Date().getHours()>18 || new Date().getHours() < 5;
    setIsNight(darkMode)
    console.log('>>>'+darkMode)
  }, []);

  useEffect(() => {
    timeRef.current = setInterval(() => {
      const target = document.querySelector(`#img-${altName}`)
      if(!target) return
      if(!target.complete) return

      clearInterval(timeRef.current) // detection completed
      setLoaded(true) // hide placeholder
    }, 200)

    return () => clearInterval(timeRef.current)
  }, [])


  return (
    <>
      {!loaded && 
        <img 
          src={coverImgStr} 
          style={{
            objectFit: 'cover', 
            width: '100%', height: '100%', 
            margin: 0, 
            zIndex: 20, position: 'absolute'
          }}
        />
      }
      {!isNight &&
        <Image
          id={`img-${altName}`}
          alt={altName}
          src={imgSrc}
          layout="fill"
          objectFit="cover"
          quality={100}
        />
      }
      {isNight &&
        <Image
          id={`img-${altName}`}
          alt={altName}
          src={imgNight}
          layout="fill"
          objectFit="cover"
          quality={100}
        />
      }
    </>
  )
}

export default ImageWithCover