/**
 * @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,
    }
  }

  render() {
    /**
     * @note this passes `state` to incrementer
     */
    return <Incrementer {...this.props} />
  }
}

export { IncrementerPlugin }
export default IncrementerPlugin