import React, { Component } from 'react'
import { connect } from 'react-redux'

import actions from 'app/actions'
import { clamp, timestamp } from 'app/utils'
import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons'

class VideoScrubber extends Component {
  state = {
    hovering: false,
  }
  constructor(props) {
    super(props)
    this.scrubberRef = React.createRef()
    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseUp = this.handleMouseUp.bind(this)
    this.handleMouseEnter = this.handleMouseEnter.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
  }
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
    window.addEventListener('mouseup', this.handleMouseUp)
  }
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMouseMove)
    window.removeEventListener('mouseup', this.handleMouseUp)
  }
  scrub(x, scrubbing) {
    const { timing, start_ts, onScrub } = this.props
    const bounds = this.scrubberRef.current.getBoundingClientRect()
    const percent = clamp((x - bounds.left) / bounds.width, 0, 1)
    const seconds = percent * timing.duration
    actions.audio.seek(start_ts + seconds)
    onScrub({
      seek: seconds,
      percent, seconds, scrubbing
    })
  }
  handleMouseDown(e) {
    e.stopPropagation()
    this.scrub(e.pageX, true)
  }
  handleMouseMove(e) {
    e.stopPropagation()
    if (!this.props.timing.scrubbing) return
    this.scrub(e.pageX, true)
  }
  handleMouseUp(e) {
    e.stopPropagation()
    this.props.onScrub({ scrubbing: false })
  }
  handleMouseEnter() {
    this.setState({ hovering: true })
  }
  handleMouseLeave() {
    this.setState({ hovering: false })
  }
  render() {
    const { playing, volume, timing } = this.props
    const { hovering } = this.state
    const timestampText = timestamp(clamp(timing.seconds, 0, timing.duration))
    return (
      <div className='video-scrubber'>
        <div className='start-controls'>
          <PlayButton playing={playing} />
        </div>
        <div
          className='scrub-bar-container'
          onMouseDown={this.handleMouseDown}
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
          ref={this.scrubberRef}
        >
          <div className='scrub-bar' />
          <div
            className='scrub-dot'
            style={{ left: (100 * timing.percent) + "%" }}
          />
          <div
            className='scrub-timestamp'
            style={{ left: (100 * (timing.percent)) + "%" }}
          >
            {timestampText}
          </div>
        </div>
        <div className='end-controls'>
          <div className='playerTime'>
            {timestampText}
          </div>
          <VolumeControl volume={volume} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  playing: state.audio.playing,
  volume: state.audio.volume,
})

export default connect(mapStateToProps)(VideoScrubber)