import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP } from 'exotic'
import { PaginationProps, PaginationState } from './typings'
import { productsPerPageList as list } from './fixtures'
import {
  defaultRenderWrapper,
  defaultRenderDropDown,
  defaultRenderPaginationWithArrows,
  defaultRenderLeftButton,
  defaultRenderPaginationInput,
  defaultRenderRightButton,
  defaultOnDecrement,
  defaultOnIncrement,
} from './renderProps'
import { CountState } from './state'

// only instantiate if needed
function initPaginationState() {
  // console.debug('[Pagination] creating default state')
  return new CountState()
}

function toPaginationState(props: PaginationProps) {
  if (props.state !== undefined) {
    // console.debug('[Pagination] passed in state via props')
    // console.dir(props)
    return props.state
  } else {
    return initPaginationState()
  }
}

@observer
class Pagination extends React.Component<PaginationProps, PaginationState> {
  static defaultProps = {
    className: '',
    paginationLimit: 10,
    defaultIndex: 1,
    list: list,
    renderWrapper: defaultRenderWrapper,
    renderPaginationWithArrows: defaultRenderPaginationWithArrows,
    renderLeftButton: defaultRenderLeftButton,
    renderRightButton: defaultRenderRightButton,
    renderDropDown: defaultRenderDropDown,
    renderPaginationInput: defaultRenderPaginationInput,
    onDecrement: defaultOnDecrement,
    onIncrement: defaultOnIncrement,
    onDropdownChange: NO_OP,
    onPaginationInputChange: NO_OP,
    onPaginationInputBlur: NO_OP,
  }

  observableState: CountState = toPaginationState(this.props)

  componentWillMount() {
    const { paginationLimit, defaultIndex } = this.props
    if (paginationLimit === 1) {
      this.observableState.disableIcon()
    }
    if (defaultIndex) {
      const paginator = defaultIndex
      if (paginator === 1) {
        this.observableState.disableIcon('left')
      }
      if (paginator === paginationLimit) {
        this.observableState.disableIcon('right')
      }
      this.observableState.setCount(paginator)
    }
  }
  render() {
    const {
      state = this.observableState,
      renderWrapper,
      renderDropDown,
      renderPaginationWithArrows,
      ...remainingProps
    } = this.props

    const dropdownView = renderDropDown(remainingProps, this.observableState)
    const paginationWithArrowView = renderPaginationWithArrows(remainingProps, this.observableState)

    const children = (
      <React.Fragment>
        {dropdownView}
        {paginationWithArrowView}
      </React.Fragment>
    )
    const view = renderWrapper({ ...this.props, children }, this.observableState)
    return view
  }
}

export { Pagination }
export default Pagination