import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { PaginationProps, State } from './typings'
import { PaginationWrapper, SelectBox } from './styled'
import {
  defaultRenderArrows,
  defaultRenderLimit,
  defaultRenderOption,
  defaultRenderSelector,
} from './renderProps'

@observer
class Pagination extends React.Component<PaginationProps, State> {
  static defaultProps = {
    renderArrows: defaultRenderArrows,
    renderLimit: defaultRenderLimit,
    renderOption: defaultRenderOption,
    renderSelector: defaultRenderSelector,
  }

  state = this.props.state || new State(this.props)

  handlePage = (event: any) => {
    const val = event.target.value
    this.state.setValue(val)
  }

  handleSize = (event: any) => {
    const val = event.target.value
    this.state.setSize(val)
  }

  render() {
    const { nowrap, renderArrows, renderLimit, renderSelector } = this.props

    const Wrapper = nowrap ? React.Fragment : PaginationWrapper
    const SelectWrapper = nowrap ? React.Fragment : SelectBox

    return (
      <Wrapper>
        {renderLimit(this.props, this.state, this.handleSize)}
        <SelectWrapper>
          {renderSelector(this.props, this.state, this.handlePage)}
          {renderArrows(this.props, this.state)}
        </SelectWrapper>
      </Wrapper>
    )
  }
}

export default Pagination
export { Pagination }