import { Component, Fragment } from 'react';
import { func, string } from 'prop-types';

export default class Textarea extends Component {
  static propTypes = {
    value: string,
    onChange: func,
    onKeyDown: func,
    onClick: func
  }

  static defaultProps = {
    value: ''
  }

  constructor (props) {
    super(props);

    this.onChangeText = this.onChangeText.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  onChangeText (event) {
    event.preventDefault();

    const { onChange } = this.props;

    if (!onChange) {
      return;
    }

    const { value } = event.target;

    return onChange(value);
  }

  onKeyDown (event) {
    const { onKeyDown: onPropKeyDown } = this.props;

    if (!onPropKeyDown) {
      return;
    }

    return onPropKeyDown(event);
  }

  onClick (event) {
    event.preventDefault()

    const { onClick: onPropClick } = this.props;

    if (!onPropClick) {
      return;
    }

    return onPropClick(event);
  }

  render () {
    const { value } = this.props;

    return (
      <textarea onChange={ this.onChangeText }
        onKeyDown={ this.onKeyDown }
        onClick={ this.onClick }
        value={ value }>
      </textarea>
    );
  }
}