import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
import IconFont from '../iconfont'
import Slider from '../slider'
import Bar from './bar'
import EventName from '../event/eventName'
import PropTypes from 'prop-types'

function LeftBar({ api, event, video, isHistory, reloadHistory, isLive, leftExtContents, leftMidExtContents, hideBar, setHideBar }) {
  const [openSliderVolume, setOpenSliderVolume] = useState(hideBar)
  const [dep, setDep] = useState(Date.now())
  const elRef = useRef()
  useEffect(() => {
    const updateRender = () => {
      setDep(Date.now())
    }
    event.addEventListener('play', updateRender)
    event.addEventListener('pause', updateRender)
    event.addEventListener('volumechange', updateRender)

    return () => {
      event.removeEventListener('play', updateRender)
      event.removeEventListener('pause', updateRender)
      event.removeEventListener('volumechange', updateRender)
    }
  }, [event])

  //缓存值
  const paused = useMemo(() => video.paused, [dep, video])
  const statusIconClassName = useMemo(() => (paused ? 'lm-player-Play_Main' : 'lm-player-Pause_Main'), [paused])
  const statusText = useMemo(() => (paused ? '播放' : '暂停'), [paused])
  const volumeVal = useMemo(() => (video.muted ? 0 : video.volume), [dep, video])
  const volumeIcon = useMemo(() => (volumeVal === 0 ? 'lm-player-volume-close' : video.volume === 1 ? 'lm-player-volume-max' : 'lm-player-volume-normal-fuben'), [volumeVal])
  const volumePercent = useMemo(() => (volumeVal === 0 ? 0 : volumeVal * 100), [volumeVal])
  const sliderClassName = useMemo(() => (openSliderVolume ? 'contraller-bar-hover-volume' : ''), [openSliderVolume])

  //TODO 方法
  const changePlayStatus = useCallback(() => {
    // 录像播放，结束后，点击开始停止，重新开始
    if (isHistory && video.ended) {
      reloadHistory()
    } else {
      video.paused ? api.play() : api.pause()
    }
  }, [video, api])

  const mutedChantgeStatus = useCallback(() => (video.muted ? api.unmute() : api.mute()), [api, video])

  const onChangeVolume = useCallback(
    volume => {
      api.setVolume(parseFloat(volume.toFixed(1)))
      volume > 0 && video.muted && api.unmute()
    },
    [api, video]
  )

  const reload = useCallback(() => {
    isHistory ? reloadHistory() : api.reload()
    event.emit(EventName.CLEAR_ERROR_TIMER)
  }, [event, isHistory, api])


  useEffect(() => {
    setOpenSliderVolume(false)
  }, [hideBar])

  return (
    <div className="contraller-left-bar" ref={elRef}>
      {leftExtContents}
      <Bar visibel={!isLive}>
        <IconFont onClick={changePlayStatus} type={statusIconClassName} title={statusText} />
      </Bar>
      <Bar className={`contraller-bar-volume ${sliderClassName}`} onClick={() => setOpenSliderVolume(true)}>
        <IconFont onClick={mutedChantgeStatus} type={volumeIcon} title="音量" />
        <div className="volume-slider-layout">
          <Slider className="volume-slider" currentPercent={volumePercent} onChange={onChangeVolume} renderTips={precent => <span>{Math.round(precent * 100)}%</span>} tipsY={-2} />
        </div>
      </Bar>
      <Bar>
        <IconFont onClick={reload} type="lm-player-Refresh_Main" title="重载" />
      </Bar>
      <Bar visibel={!isLive}>
        <IconFont onClick={() => {api.backWind()}} type="lm-player-PrevFast" title="快退" />
      </Bar>
      <Bar visibel={!isLive}>
        <IconFont onClick={() => {api.fastForward()}} type="lm-player-NextFast_Light" title=" 快进" />
      </Bar>
      {leftMidExtContents}
    </div>
  )
}

LeftBar.propTypes = {
  api: PropTypes.object,
  event: PropTypes.object,
  playerProps: PropTypes.object,
  video: PropTypes.node,
  reloadHistory: PropTypes.func,
  isHistory: PropTypes.bool
}

export default LeftBar
