import React from 'react'
import { isFunction } from 'uxui-modules/exotic'
import { IncrementerProps, DefaultIncrementerState } from './typings'
import { InputBoxItem, InputBoxWrapper, ButtonComponent, Arrow, ArrowWrapper, IncrementerWrapper } from './styled'

function defaultRenderInputBox(props: IncrementerProps, state: DefaultIncrementerState) {
  const { onChange } = props
  return <InputBoxWrapper><InputBoxItem type="text" value={state.count} onChange={onChange(state.count)} /></InputBoxWrapper>
}

function defaultOnIncrement(props: IncrementerProps, state: DefaultIncrementerState) {
  return state.incrementCount(props)
}

function defaultOnDecrement(props: IncrementerProps, state: DefaultIncrementerState) {
  return state.decrementCount(props)
}

function defaultRenderArrows(props: IncrementerProps, state: DefaultIncrementerState) {
  const increment = event => defaultOnIncrement(props, state)
  const decrement = event => defaultOnDecrement(props, state)

  return (
    <ArrowWrapper>
      <ButtonComponent onClick={increment} isDisabled={!state.shouldIncrement}>
        <Arrow up />
      </ButtonComponent>
      <ButtonComponent onClick={decrement} isDisabled={!state.shouldDecrement}>
        <Arrow down />
      </ButtonComponent>
    </ArrowWrapper>
  )
}

function defaultRenderContainer(props: IncrementerProps, state: DefaultIncrementerState) {
  const { renderInputBox, renderArrows, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderInputBox(remainingProps, state)}
      {renderArrows(remainingProps, state)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: IncrementerProps) {
  const { children, nowrap, className } = props

  if (nowrap) {
    return <React.Fragment>{children}</React.Fragment>
  } else {
    return <IncrementerWrapper className={className}>{children}</IncrementerWrapper>
  }
}

export { defaultRenderInputBox, defaultRenderArrows, defaultRenderContainer, defaultRenderWrapper }