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

export class PaginationComponentUxTheme 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() {
    console.log(this.props)
    const canPrevious = this.props.page != 0
    const canNext = this.props.page < this.props.pages - 1
    return (
      <PaginationWrapper>

        <div className='parent'>
          <div className="button-wrap">
            <button className='button' disabled={!canPrevious} onClick={() => {
              if (!canPrevious) return
              this.onPageChange(this.props.page - 1)
            }}>
              Previous
					</button>
          </div>
          <div className="center">
            <div className='pageInfo'> Page
						<input
                type="number"
                value={this.state.page}
                onChange={this.handleChange}
                className='pageNo'
              />
              of {this.props.pages}
            </div>
          </div>
          <div className="button-wrap">
            <button className='button' disabled={!canNext} onClick={() => {
              if (!canNext) return
              this.onPageChange(this.props.page + 1)
            }}>
              Next
            </button>
          </div>
        </div>
      </PaginationWrapper>
    )
  }
}