import * as React from 'react'
import { isFunction } from 'exotic'
import { MaterialIcon } from  '@skava/ui'
import {
  IncrementerProps,
  DefaultIncrementerState,
} from './typings'
import {
  StyledInput,
  InputBoxWrapper,
  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 => {
    event.preventDefault()
    defaultOnIncrement(props, state)
    handleOnChangeQuantity()
  }
  const decrement = event => {
    event.preventDefault()
    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 }