class Nav extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isDown: false,
      startX: undefined,
      scrollLeft: undefined
    }

    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
    this.handleMouseUp = this.handleMouseUp.bind(this)
    this.handleMouseMove = this.handleMouseMove.bind(this)
  }

  handleMouseDown(e) {
    this.setState({
      isDown: true,
      startX: e.pageX - e.currentTarget.offsetLeft,
      scrollLeft: e.currentTarget.scrollLeft
    })
  }

  handleMouseLeave() {
    this.setState({
      isDown: false
    })
  }

  handleMouseUp() {
    this.setState({
      isDown: false
    })
  }

  handleMouseMove(e) {
    if (!this.state.isDown) return;

    e.preventDefault()

    const x = e.pageX - e.currentTarget.offsetLeft
    const walk = (x - this.state.startX) * 2

    e.currentTarget.scrollLeft = this.state.scrollLeft - walk
  }

  render() {
    return (
      <nav
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
        onMouseLeave={this.handleMouseLeave}
        onMouseMove={this.handleMouseMove}
      >
        {/* render a NodeList */}
      </nav>
    )
  }
}