import React, { Component } from "react"

import { Scrollbars } from "react-custom-scrollbars"

class ScrollbarsWithScrollShadows extends Component {

  constructor(props) {
    super(props)

    this.state = {
      scrollTop: 0
    }

    this.handleUpdate = this.handleUpdate.bind(this)
  }

  componentDidMount() {
    const { scrollbars } = this.refs

    this.observer = new MutationObserver(mutations => {
      mutations.forEach(function(mutation) {
        scrollbars.update()
      })
    })

    this.observer.observe(scrollbars.container, {
      subtree: true,
      childList: true,
      attributes: true
    })
  }

  componentWillUnmount() {
    this.observer.disconnect()
  }

  handleUpdate(values) {
    const { shadow } = this.refs
    const { scrollTop } = values
    const shadowOpacity = 1 / 20 * Math.min(scrollTop, 20)
    shadow.style.opacity = shadowOpacity
  }

  render() {
    const { children, shadowClassName, ...props } = this.props

    return (
      <Scrollbars
        ref="scrollbars"
        onUpdate={this.handleUpdate}
        renderTrackVertical={props => (
          <div {...props} className="Scrollbars--track Scrollbars--track-vertical"/>
        )}
        renderThumbVertical={props => (
          <div {...props} className="Scrollbars--thumb Scrollbars--thumb-vertical"/>
        )}
        {...props}
      >
        <div className={shadowClassName} ref="shadow"/>
        {children}
      </Scrollbars>
    )
  }
}

export default ScrollbarsWithScrollShadows