import React, { useEffect, useState, useRef } from 'react'
import EventName from './eventName'

function ContrallerEvent({ event, playContainer, children }) {
  const timer = useRef(null)
  const [visibel, setVisibel] = useState(true)
  useEffect(() => {
    const showContraller = () => {
      setVisibel(true)
      event.emit(EventName.SHOW_CONTRALLER)
      clearTimeout(timer.current)
      // timer.current = setTimeout(() => {
      //   setVisibel(false)
      //   event.emit(EventName.HIDE_CONTRALLER)
      // }, 3 * 1000)
    }
    const hideContraller = () => {

      setVisibel(false)
      event.emit(EventName.HIDE_CONTRALLER)
    }
    playContainer.addEventListener('mousemove', showContraller, false)
    playContainer.addEventListener('mouseout', hideContraller, false)

    return () => {
      playContainer.removeEventListener('mousemove', showContraller, false)
      playContainer.removeEventListener('mouseout', hideContraller, false)
    }
  }, [event])

  return React.Children.map(children, child => (React.isValidElement(child) ? React.cloneElement(child, { visibel }) : child))
}

export default ContrallerEvent
