import React from 'react'
import { NO_OP, isFunction } from 'exotic'
import { observerWithObservableProps } from '@skava/state'
import { IncrementerProps, IncrementerStateType } from './typings'
import { IncrementerBox } from './IncrementerBox'
import { IncrementerWrapper } from './styled'
import { toIncrementerState } from './deps'

@observerWithObservableProps
class Incrementer extends React.Component<
  IncrementerProps,
  IncrementerStateType
> {
  static defaultProps = {
    className: '',
    step: 1,
    minValue: 1,
    maxValue: 99,
    defaultValue: 1,
    onValueChange: NO_OP,
  }

  observableState: IncrementerStateType = toIncrementerState(this.props)

  updateState = (value: IncrementerProps) => {
    console.log('props changed o.o')
    this.observableState.update(value)
  }

  handleOnChangeQuantity = () => {
    const { onValueChange } = this.props
    if (isFunction(onValueChange)) {
      onValueChange(this.observableState.count)
    }
  }

  /**
   * @todo renderProp for this
   */
  render() {
    const { className, ...remainingProps } = this.props

    return (
      <IncrementerWrapper className={className}>
        <IncrementerBox state={this.observableState} />
      </IncrementerWrapper>
    )
  }
}

export { Incrementer }
export default Incrementer