import React from 'react'
import { isFunction } from 'exotic'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { IncrementerProps, DefaultIncrementerState } from './typings'
import {
  StyledInput,
  InputBoxWrapper,
  StyledButton,
  StyledPlusButton,
  StyledMinusButton,
  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 defaultHandleChange(
  props: IncrementerProps,
  state: DefaultIncrementerState,
  event: Event
) {
  return state.handleChange(props, event)
}

function defaultHandleBlur(
  props: IncrementerProps,
  state: DefaultIncrementerState,
  event: Event
) {
  return state.handleBlur(props, event)
}

function defaultRenderBox(
  props: IncrementerProps,
  state: DefaultIncrementerState
) {
  const { onChange } = props

  const handleOnChangeQuantity = () => {
    if (isFunction(onChange)) {
      props.onChange(state.count)
    }
  }
  const increment = event => {
    defaultOnIncrement(props, state)
    handleOnChangeQuantity()
  }
  const decrement = event => {
    defaultOnDecrement(props, state)
    handleOnChangeQuantity()
  }
  const handleChange = event => {
    defaultHandleChange(props, state, event)
    handleOnChangeQuantity()
  }

  const handleBlur = event => defaultHandleBlur(props, state, event)

  return (
    <InnerWrapper>
      <StyledMinusButton
        onClick={decrement}
        isDisabled={!state.shouldDecrement}
      >
        <MaterialIcon type="minus" />
      </StyledMinusButton>
      <InputBoxWrapper>
        <StyledInput
          type="text"
          value={state.count}
          onChange={handleChange}
          onBlur={handleBlur}
        />
      </InputBoxWrapper>
      <StyledPlusButton onClick={increment} isDisabled={!state.shouldIncrement}>
        <MaterialIcon type="plus" />
      </StyledPlusButton>
    </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 }