import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import throttle from 'lodash/throttle'
import CircularProgress from 'material-ui/CircularProgress';

const scrollBuffer = 20
export class ScrollableBase extends React.PureComponent{

	handleScroll = throttle( e => {
		const { scrollHeight, scrollTop, clientHeight } = this.el
		if( this.props.atBottom && scrollHeight-scrollTop-clientHeight < scrollBuffer){
			this.props.atBottom(scrollHeight-scrollTop-clientHeight)
		}
		// else if( this.props.atTop && scrollTop<scrollBuffer ){
		// 	this.props.atTop(scrollTop)
		// }
		//else
	}, 100 )

	refCb = el => {
		if(this.props.refCb) this.props.refCb(el)
		this.el = el
	}

	render(){
		return(
			<div
			  style={{
			  	height: `${this.props.height}`,
			  	overflowY:'auto' 
			  }}
			  ref={this.refCb}
			  onScroll={this.handleScroll} >
				{this.props.children}
			</div>
		)
	}
}

ScrollableBase.propTypes = {
  height : PropTypes.string.isRequired,
  atTop : PropTypes.func,
  atBottom :PropTypes.func,
  refCb : PropTypes.func
};

// export class ScrollCushion extends React.PureComponent{

// 	constructor(){
// 		super()
// 		this.state = {
// 			topParam : 0,
// 			bottomParam : 0
// 		}
// 	}

// 	atTop = (t) => {
// 		//console.log(t)
// 		if(t==0){
// 			this.setState({topParam:20})
// 			setTimeout(()=>this.setState({topParam:0}), 700)
// 		}
// 	}

// 	atBottom = (b) => {
// 		//console.log(b)
// 		if(this.props.atBottom) this.props.atBottom()
// 	}

// 	render(){
// 		return(
// 			<ScrollableBase
// 				refCb={this.props.refCb}
// 				height={this.props.height}
// 			 	atTop={this.atTop}
// 			 	atBottom={this.atBottom}
// 			 >
// 				 <div key='top' style={{
// 					transition: 'all .3s ease-out',
// 					width:'100%',
// 					background:'white',
// 					height:`${this.state.topParam}px`
// 				}}></div>
// 					{this.props.children}
// 				<div key='bottom' style={{
// 					transition: 'all .4s ease-out',
// 					width:'100%', 
// 					height:'0px'
// 				}}></div>
// 			</ScrollableBase>
// 		)
// 	}
// }

const defaultLoader = (loading,key) => (
	<div key={'loader'+String(key)} style={{
		display : 'flex',
		alignItems : 'center',
		justifyContent : 'center',
		transition: `${!loading ? 'all .4s ease-out' : 'none'}`,
		width:'100%',
		height:`${loading?'50px':'0px'}`
	}}>
		<CircularProgress style={{transition:'inherit'}} size={loading?40:2} thickness={2} />
	</div>
)

export class PaginatedScrollable extends React.PureComponent{

	constructor(){
		super()
		this.state = { loading : false }
		this.loaderKey = false
	}

	componentWillReceiveProps(np){
		this.oldLength = this.props.children.length
		this.newLength = np.children.length
		if(this.newLength > this.oldLength){
			this.change = true
			this.setState({ loading : false })
		}
	}

	fetchItems = () => {
		if(!this.props.noMorePages && !this.state.loading) {
			this.props.fetchItems(this.props.page!=undefined ? this.props.page+1 : undefined)
			this.setState({ loading : true })
		}
	}

	render(){
		var loader = this.props.loadingComp || defaultLoader
		var children  = [...this.props.children]
		if(!this.props.noMorePages){
			if(this.change){
				children.splice(this.oldLength,0,loader(this.state.loading,this.loaderKey))
					.splice(this.newLength+1,0,loader(this.state.loading,!this.loaderKey))
				this.change = false
				this.loaderKey = !this.loaderKey
			}
			else {
				children.push(loader(this.state.loading,this.loaderKey))
			}
		}
		return(
			<ScrollableBase
				refCb={this.props.refCb}
				height={this.props.height}
			 	atBottom={this.fetchItems}>
				{children}
			</ScrollableBase>
		)
	}
}

PaginatedScrollable.propTypes = {
  height : PropTypes.string.isRequired,
  fetchItems : PropTypes.func.isRequired,
  children : PropTypes.array.isRequired,
  page : PropTypes.number,
  noMorePages : PropTypes.bool,
  loadingComp : PropTypes.func,
  refCb : PropTypes.func
};