import { Fragment, h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'

import { string } from 'prop-types'

import { VideoWrapper, Iframe, StyledCrossSvg as CrossSvg } from './styles'

const Video = ({ url, onClose }) => {
  const overlayTimeout = useRef(null)
  const [overlayActive, setOverlayActiveState] = useState(false)

  const activateOverlay = () => {
    clearTimeout(overlayTimeout.current)
    overlayTimeout.current = null
    setOverlayActiveState(true)

    console.log('overlayTimeout.current', overlayTimeout.current)
    overlayTimeout.current = setTimeout(
      () => setOverlayActiveState(false),
      1500
    )
  }
  return (
    <Fragment>
      <VideoWrapper $active={overlayActive}>
        <CrossSvg $active={overlayActive} onClick={onClose} size="64" />
      </VideoWrapper>
      <Iframe
        onMouseMove={activateOverlay}
        width="560"
        height="315"
        src="https://www.youtube-nocookie.com/embed/b-JQ5Bo4JnI?autoplay=1&vq=hd1080"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      />
    </Fragment>
  )
}

Video.propTypes = {
  url: string,
}

export default Video