import React, { useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import uuidv1 from 'uuid/v1'

import './index.less'

let currentTipComponents = []
let setCurrentTipComponents

function GlobalTipContainer(props) {
const { style } = props
const wrapperStyle = _.assign({}, style)

const [tipComponents, setTipComponents] = useState([])
currentTipComponents = tipComponents
setCurrentTipComponents = setTipComponents

const [displayedTipComponents, setDisplayedTipComponents] = useState([])
const [mouseHover, setMouseHover] = useState(false)

const wrapElemRef = useRef(null)
useEffect(() => {
if (mouseHover === false) {
wrapElemRef.current.scrollTop = 10e10
}
})

useEffect(() => {
setDisplayedTipComponents(tipComponents.slice(0, 2))
}, [tipComponents])

return (

GlobalTipContainer.addTip = (tipComponent) => {
const key = uuidv1()
currentTipComponents = currentTipComponents.slice(0)
currentTipComponents.push(React.cloneElement(tipComponent, {
key,
onClose: _.flow(tipComponent.props.onClose || _.noop, () => { GlobalTipContainer.removeTip(key) }),
}))
setCurrentTipComponents(currentTipComponents)
return key
}

GlobalTipContainer.removeTip = (key) => {
const index = _.findIndex(currentTipComponents, ['key', key])
if (index !== -1) {
currentTipComponents.splice(index, 1)
setCurrentTipComponents(currentTipComponents.slice(0))
}
}

GlobalTipContainer.propTypes = {
style: PropTypes.object,
}

GlobalTipContainer.defaultProps = {
style: {},
}

export default GlobalTipContainer