import React from 'react'
import { PaginationWrapper } from './StyledWrapper'

export class PaginationComponent extends React.PureComponent{
	constructor(props){
		super(props)
		this.state = {
			page : props.page+1
		}
	}

	handleChange = e => {
		var page = e.target.value
		this.setState({page})
		if(page && page!=this.props.page+1 && page<=this.props.pages){
			this.props.onPageChange(page-1)
		}
	}

	onPageChange = page => {
		this.props.onPageChange(page)
		this.setState({page : page+1})
	}

	render(){
		const canPrevious = this.props.page!=0
		const canNext = this.props.page<this.props.pages-1
		return (
			<PaginationWrapper>
				<div className='parent'>
					<div className='pageInfo'> Page 
						<textarea
							value={this.state.page}
							onChange={this.handleChange}
							className='pageNo'					
						/>
					of {this.props.pages} </div>
					<button className='navButton' disabled={!canPrevious} onClick={()=>{
						if(!canPrevious) return
						this.onPageChange(this.props.page-1)
					}}>
						<i className="material-icons">keyboard_arrow_left</i>
					</button>
					<button className='navButton' disabled={!canNext} onClick={()=>{
						if(!canNext) return
						this.onPageChange(this.props.page+1)
					}}>
						<i className="material-icons">keyboard_arrow_right</i>
					</button>
				</div>
			</PaginationWrapper>
		)
	}
}