import {
  useMemo,
  useState,
  useCallback,
} from 'react'

import debounce from 'lodash/debounce'

export const useControlsVisibility = (isFullscreen: boolean) => {
  const [controlsVisible, setControlsVisibility] = useState(true)

  const show = useCallback(() => {
    setControlsVisibility(true)
  }, [])

  const hide = useCallback(() => {
    setControlsVisibility(false)
  }, [])

  const hideDebounced = useMemo(
    () => debounce(hide, 3000),
    [hide],
  )

  const onMouseMove = () => {
    show()
    if (isFullscreen) {
      hideDebounced()
    }
  }

  return {
    controlsVisible,
    onMouseEnter: show,
    onMouseLeave: hide,
    onMouseMove,
    onTouchEnd: hideDebounced,
    onTouchStart: show,
  }
}
