import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isUndefined } from 'exotic'
import { Value } from '../typings'
import { InputProps } from '../inputs/typings'
// import { InputState } from '../inputs/InputState'
import { ObserverInput } from '../inputs/ObserverInput'

@observer
class TextBoxPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return isUndefined(props.type) || ['text'].includes(props.type) || true
  }

  // used by state
  static defaultState = {
    validator: (value: Value) => true,
  }

  // static defaultProps = {
  // can use these defaultProps for creating state?
  // ^ will not work, needs more info at runtime
  // validator: isValidLength,
  // }

  render() {
    return <ObserverInput {...this.props} />
  }
}

export { TextBoxPlugin, TextBoxPlugin as TextPlugin }
export default TextBoxPlugin