import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { InputProps } from '../inputs'

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

  render() {
    const { state, className } = this.props
    const {
      ref,
      htmlFor,
      label,
      labelText,
      ...remainingProps
    } = state
    return (
      <label htmlFor={htmlFor} className={className} {...remainingProps}>
        {labelText || label}
      </label>
    )
  }
}

export { LabelPlugin }
export default LabelPlugin