import React, { Component } from 'react'
import classnames from 'classnames'
//
// import _ from './utils'

const defaultButton = props => (
  <button type='button' {...props} className='-btn'>
    {props.children}
  </button>
)

export default class ReactTablePagination extends Component {
  constructor (props) {
    super()

    this.getSafePage = this.getSafePage.bind(this)
    this.changePage = this.changePage.bind(this)
    this.applyPage = this.applyPage.bind(this)

    this.state = {
      page: props.page,
    }
  }

  componentWillReceiveProps (nextProps) {
    this.setState({ page: nextProps.page })
  }

  getSafePage (page) {
    if (isNaN(page)) {
      page = this.props.page
    }
    return Math.min(Math.max(page, 0), this.props.pages - 1)
  }

  changePage (page) {
    page = this.getSafePage(page)
    this.setState({ page })
    if (this.props.page !== page) {
      this.props.onPageChange(page)
    }
  }

  applyPage (e) {
    e && e.preventDefault()
    const page = this.state.page
    this.changePage(page === '' ? this.props.page : page)
  }

  render () {
    const {
      // Computed
      pages,
      // Props
      page,
      showPageSizeOptions,
      pageSizeOptions,
      pageSize,
      showPageJump,
      canPrevious,
      canNext,
      onPageSizeChange,
      className,
      PreviousComponent = defaultButton,
      NextComponent = defaultButton,
    } = this.props

    return (
      <div
        className={classnames(className, '-pagination')}
        style={this.props.paginationStyle}
      >
        <div className='-previous'>
          <PreviousComponent
            onClick={e => {
              if (!canPrevious) return
              this.changePage(page - 1)
            }}
            disabled={!canPrevious}
          >
            {this.props.previousText}
          </PreviousComponent>
        </div>
        <div className='-center'>
          <span className='-pageInfo'>
            {this.props.pageText}{' '}
            {showPageJump
              ? <div className='-pageJump'>
                <input
                  type={this.state.page === '' ? 'text' : 'number'}
                  onChange={e => {
                    const val = e.target.value
                    const page = val - 1
                    if (val === '') {
                      return this.setState({ page: val })
                    }
                    this.setState({ page: this.getSafePage(page) })
                  }}
                  value={this.state.page === '' ? '' : this.state.page + 1}
                  onBlur={this.applyPage}
                  onKeyPress={e => {
                    if (e.which === 13 || e.keyCode === 13) {
                      this.applyPage()
                    }
                  }}
                />
              </div>
              : <span className='-currentPage'>
                {page + 1}
              </span>}{' '}
            {this.props.ofText}{' '}
            <span className='-totalPages'>{pages || 1}</span>
          </span>
          {showPageSizeOptions &&
            <span className='select-wrap -pageSizeOptions'>
              <select
                onChange={e => onPageSizeChange(Number(e.target.value))}
                value={pageSize}
              >
                {pageSizeOptions.map((option, i) => {
                  return (
                    <option key={i} value={option}>
                      {option} {this.props.rowsText}
                    </option>
                  )
                })}
              </select>
            </span>}
        </div>
        <div className='-next'>
          <NextComponent
            onClick={e => {
              if (!canNext) return
              this.changePage(page + 1)
            }}
            disabled={!canNext}
          >
            {this.props.nextText}
          </NextComponent>
        </div>
      </div>
    )
  }
}

@@ -153,16 +153,16 @@
 ype=
-'
+%22
 button
-'
+%22
  %7B..
@@ -183,14 +183,14 @@
 ame=
-'
+%22
 -btn
-'
+%22
 %3E%0A  
@@ -955,12 +955,16 @@
     
-e &&
+if (e) %7B
  e.p
@@ -978,16 +978,18 @@
 efault()
+ %7D
 %0A    con
@@ -1575,17 +1575,17 @@
 assName=
-'
+%22
 -previou
@@ -1585,17 +1585,17 @@
 previous
-'
+%22
 %3E%0A      
@@ -1630,33 +1630,34 @@
        onClick=%7B
-e
+()
  =%3E %7B%0A          
@@ -1899,17 +1899,17 @@
 ame=
-'
+%22
 -center
-'
+%22
 %3E%0A  
@@ -1928,25 +1928,25 @@
 n className=
-'
+%22
 -pageInfo'%3E%0A
@@ -1942,17 +1942,17 @@
 pageInfo
-'
+%22
 %3E%0A      
@@ -2041,17 +2041,17 @@
 assName=
-'
+%22
 -pageJum
@@ -2051,17 +2051,17 @@
 pageJump
-'
+%22
 %3E%0A      
@@ -2846,17 +2846,17 @@
 assName=
-'
+%22
 -current
@@ -2859,17 +2859,17 @@
 rentPage
-'
+%22
 %3E%0A      
@@ -2982,17 +2982,17 @@
 assName=
-'
+%22
 -totalPa
@@ -2994,17 +2994,17 @@
 talPages
-'
+%22
 %3E%7Bpages 
@@ -3096,17 +3096,17 @@
 assName=
-'
+%22
 select-w
@@ -3125,17 +3125,17 @@
 eOptions
-'
+%22
 %3E%0A      
@@ -3320,25 +3320,25 @@
 tion, i) =%3E 
-%7B
+(
 %0A           
@@ -3340,35 +3340,77 @@
             
-return (%0A  
+// eslint-disable-next-line react/no-array-index-key%0A
             
@@ -3467,18 +3467,16 @@
         
-  
 %7Boption%7D
@@ -3516,18 +3516,16 @@
         
- 
- 
 %3C/option
@@ -3546,29 +3546,9 @@
     
-  )%0A                %7D
+)
 )%7D%0A 
@@ -3633,15 +3633,15 @@
 ame=
-'
+%22
 -next
-'
+%22
 %3E%0A  
@@ -3684,17 +3684,18 @@
 nClick=%7B
-e
+()
  =%3E %7B%0A  

Fix pagination.js linter errors