import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { styled } from 'styleh-components'
import { ObserverInput } from '../inputs/ObserverInput'
import { errorMessageFor, isValid } from '../../validators'
import { InputProps } from '../inputs'
import { InputState } from '../inputs/InputState'
import { Value } from '../typings'

const StyledTextArea = styled.textarea ``

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

  static defaultState = (inputState: InputState) => {
    return {
      validator: (value: Value) =>
        isValid(value as string) || errorMessageFor('required'),
    }
  }

  renderInput = (props:InputProps)  => <StyledTextArea {...props} />

  render() {
    const { ref, className, ...remainingProps } = this.props
    return (
      <ObserverInput
        renderInput={this.renderInput}
        dataQa="qa-textarea"
        className={className}
        {...remainingProps}
      />
    )
  }
}