import React from 'react'
import { IncrementerProps, DefaultIncrementerState } from './typings'
import {
  StyledInput,
  InputBoxWrapper,
  StyledButton,
  StyledPlusIcon,
  StyledMinusIcon,
  InnerWrapper,
  IncrementerWrapper,
} from './styled'

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

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

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

  return (
    <InnerWrapper>
      <StyledButton onClick={decrement} isDisabled={!state.shouldDecrement}>
        <StyledMinusIcon />
      </StyledButton>
      <InputBoxWrapper>
        <StyledInput
          type="text"
          value={state.count}
          onChange={onChange(state.count)}
        />
      </InputBoxWrapper>
      <StyledButton onClick={increment} isDisabled={!state.shouldIncrement}>
        <StyledPlusIcon />
      </StyledButton>
    </InnerWrapper>
  )
}

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 { defaultRenderBox, defaultRenderWrapper }