import React, { Component } from 'react';

export default class SerialMonitor extends Component {
	constructor (props) {
		super(props)

		this.handleSend = this.handleSend.bind(this)
	}

	handleSend (e) {
		e.preventDefault()
		console.log('submitting stdin handler', this.refs.serialMonitorSTDIN.value);
		this.props.serialMonitorInputHandler(this.refs.serialMonitorSTDIN.value)
	}
	render() {
		return (
			<div>
				<div className='SerialMonitor__stdout' id='SerialMonitor__STDOUT'>
					{this.props.serialMonitorOutputMessage}
				</div>

				{
					this.props.stdin ? <form className='form-group' onSubmit={this.handleSend}>
					                  <input 
					                  	type='text' 
					                  	className='form-control' 
					                  	ref='serialMonitorSTDIN' 
					                  	name='SerialMonitor__stdin' 
					                  	id='SerialMonitor__stdin' 
					                  	placeholder='Enter input'
					                  	autoComplete="off"/>
					                   <button
								          className="btn btn-success center-block submit-button"
								          id='stdin-submit-button'
								          onClick={this.handleSend}>
								          Send
								        </button>
					                </form>
	                : null
	            }
			</div>
		);
	}
}
