import React, { Component } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'
import { SpringSystem } from 'rebound'
import css from 'dom-css'

const shadowTopStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  height: 10,
  background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)'
}

const shadowBottomStyle = {
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  height: 10,
  background: 'linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)'
}

export default class ShadowScrollbars extends Component {
  onUpdate = (values) => {
    const { shadowTop, shadowBottom } = this
    const { scrollTop, scrollHeight, clientHeight } = values
    const shadowTopOpacity = 1 / 20 * Math.min(scrollTop, 20)
    const bottomScrollTop = scrollHeight - clientHeight
    const shadowBottomOpacity = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20))
    css(shadowTop, { opacity: shadowTopOpacity })
    css(shadowBottom, { opacity: shadowBottomOpacity })
  }

  handleSpringUpdate = (spring) => {
    const val = spring.getCurrentValue()
    this.refs.scrollbars.scrollTop(val)
  }

  getScrollTop = () => {
    return this.refs.scrollbars.getScrollTop()
  }

  getScrollHeight = () => {
    return this.refs.scrollbars.getScrollHeight()
  }

  scrollTo = (top) => {
    const { scrollbars } = this.refs
    const scrollTop = scrollbars.getScrollTop()
    this.spring.setCurrentValue(scrollTop).setAtRest()
    this.spring.setEndValue(scrollTop + top)
  }

  getBoundingClientRect = () => {
    return this.node.getBoundingClientRect()
  }

  componentDidMount () {
    this.springSystem = new SpringSystem()
    this.spring = this.springSystem.createSpring()
    this.spring.addListener({ onSpringUpdate: this.handleSpringUpdate })
  }

  componentWillUnmount () {
    this.springSystem.deregisterSpring(this.spring)
    this.springSystem.removeAllListeners()
    this.spring.destroy()
    this.springSystem = null
    this.spring = null
  }

  render () {
    const { style, ...props } = this.props
    const containerStyle = {
      ...style,
      position: 'relative'
    }
    return (
      <div
        ref={(node) => { this.node = node || this.node }}
        style={containerStyle}
      >
        <div ref={(shadowTop) => { this.shadowTop = shadowTop || this.shadowTop }}
          style={shadowTopStyle} />
        <div ref={(shadowBottom) => { this.shadowBottom = shadowBottom || this.shadowBottom }}
          style={shadowBottomStyle} />
        <Scrollbars
          ref='scrollbars'
          onUpdate={this.onUpdate}
          {...props} />
      </div>
    )
  }
}

@@ -1108,210 +1108,101 @@
 nst 
-val = spring.getCurrentValue()%0A    this.refs.scrollbars.scrollTop(val)%0A  %7D%0A%0A  getScrollTop = () =%3E %7B%0A    return this.refs.scrollbars.getScrollTop()%0A  %7D%0A%0A  getScrollHeight = () =%3E %7B%0A    r
+%7B scrollbars %7D = this%0A    if (scrollbars) %7B%0A      const val = spring.g
 et
+C
 ur
-n this.refs.
+rentValue()%0A      
 scro
@@ -1212,25 +1212,28 @@
 ars.
-getS
+s
 croll
-Height()
+Top(val)%0A    %7D
 %0A  %7D
@@ -1293,18 +1293,37 @@
 this
-.refs%0A
+%0A    if (scrollbars) %7B%0A 
     
+ 
 cons
@@ -1362,16 +1362,18 @@
 llTop()%0A
+  
     this
@@ -1419,24 +1419,26 @@
 tRest()%0A    
+ 
+ 
 this.spring.
@@ -1466,16 +1466,22 @@
  + top)%0A
+    %7D%0A
   %7D%0A%0A  g
@@ -2507,17 +2507,18 @@
     ref=
-'
+%7B(
 scrollba
@@ -2519,17 +2519,54 @@
 rollbars
-'
+) =%3E %7B this.scrollbars = scrollbars %7D%7D
 %0A       

Fix null error during sort tab