import React, { ChangeEvent } from 'react';
import { TextField } from '@material-ui/core';

interface Props {
  messageHandler: (msg: string) => void;
}

interface State {
  inputText: string;
}

export default class MessageInput extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      inputText: ''
    };
  }

  messageHandler(event: ChangeEvent<HTMLInputElement>) {
    this.props.messageHandler(event.target.value);
  }

  render() {
    return (
      <TextField variant='outlined'
                 label='Send a message...'
                 onChange={this.messageHandler}
      />
    );
  }
}