import React,{PropTypes} from 'react';   
import { Scrollbars } from 'react-custom-scrollbars';
import cx from 'classnames';
import s from './PagingScrollbars.scss';


class PagingScrollbars extends React.Component {
	constructor (props) {
	    super(props);   
	    this.scrollChange=this.scrollChange.bind(this);
	    this.scrollStart=this.scrollStart.bind(this);
	    this.getRef=this.getRef.bind(this);
	} 
	static propTypes = {  
		loadWay:PropTypes.string,
		children:PropTypes.oneOfType([
	      PropTypes.element,
	      PropTypes.array
	    ]),
		loadMore:PropTypes.func,
		isLoad:PropTypes.bool
	} 
	static defaultProps={
		loadWay:'up',//'down'
		isLoad:false
	}
	scrollStart(){
		const {my_paging_scrollbar}=this.refs;
		const top=my_paging_scrollbar.getScrollTop();
		this._preScrollTop=top;
	}
	scrollChange(values){ 
		const {my_paging_scrollbar}=this.refs;
		const {top,scrollTop,scrollHeight,clientHeight}=my_paging_scrollbar.getValues(); 
		const {loadMore,isLoad,loadWay}=this.props;
		const preTop=this._preScrollTop;  
		if(!isLoad&&loadWay=='up'&&top<0.1&&preTop>scrollTop){
			loadMore(my_paging_scrollbar.getValues()); 
		}else if(!isLoad&&loadWay=='down'&&top>0.9&&preTop<scrollTop){
			loadMore(my_paging_scrollbar.getValues()); 
		}  
	}
	getRef(){
		return this.refs['my_paging_scrollbar'];
	}
	render(){ 
		const {children}=this.props;
		return( 
			<Scrollbars onScrollStop={this.scrollChange} onScrollStart={this.scrollStart} ref='my_paging_scrollbar'>
				{children}
			</Scrollbars>
		)
	}
}
 


export default PagingScrollbars;