/**
 * @todo use html5 `min` & `max`
 */
import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { Incrementer } from '../../components/Incrementer'
import { Value } from '../typings'
import { InputProps } from '../inputs/typings'
import { InputState } from '../inputs/InputState'

@observer
class IncrementerPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['incrementer'].includes(props.type)
  }

  // used by state - incrementer has it's own validation right?
  static defaultState = (inputState: InputState) => {
    return {
      validator: (value: Value) => false,
    }
  }

  componentWillMount() {
    const { state } = this.props
    const { defaultValue } = state.attributes
    state.setValue(defaultValue)
  }

  handleChange = (args: number) => {
    const { state } = this.props
    state.setValue(args)
  }

  render() {
    /**
     * @note this passes `state` to incrementer
     */

    const { state, className } = this.props
    const { minValue=1, maxValue, defaultValue, step } = state.attributes
    const attributes = {
      className,
      minValue,
      maxValue,
      defaultValue,
      step,
      onChange: this.handleChange,
    }
    return <Incrementer {...attributes} />
  }
}

export { IncrementerPlugin }
export default IncrementerPlugin