import React, { Component } from 'react';
// import {ToggleButton} from 'components'
export default class WiFiConfigurationForm extends Component {
	constructor (props) {
		super(props)

		this.handleConfig = this.handleConfig.bind(this)
		this.wifiStatusHandler = this.wifiStatusHandler.bind(this)
	}
	componentDidMount() {
		$('#wifiStatus').bootstrapToggle()
	}

	wifiStatusHandler () {
		// console.log('wifiStatus', document.getElementById('wifiStatus').checked);
		$('#wifiStatus').bootstrapToggle('toggle')
	}
	handleConfig (e) {
		// console.log('enter key pressed');
		e.preventDefault()
		let ssid = this.refs.wifiSSID.value
		let password = this.refs.wifiPassword.value
		let wifiStatus = $('#wifiStatusLabel').children().hasClass('off') ? 'OFF' : 'ON'
		if (ssid === "" || ssid === undefined || ssid === null || password === "" || password === undefined || password === null) {
			$('#wifiConfigSettingsError').show()
			// console.log('error');
			return
		}
		$('#wifiConfigSettingsError').hide()
		// console.log('ssid, password', this.refs);
		let wifiSettings = {
			wifiStatus,
			ssid,
			password
		}
		this.props.configWiFi(wifiSettings)
		$('#wifiConfigSettingsSuccess').show()
	}
	render() {
		// console.log('WiFiConfigurationForm props', this.props);
		return (
			<div>
				<div className='row'>
					<div className='col-xs-offset-4'>
						<div className="loginFormDiv">
							<div className ="loginForm">
								<form role='form' className='form-group' onSubmit={this.handleConfig}>
									<input type='text' className='form-control' ref='wifiSSID' name='WiFiSSID' id='WiFiSSID' placeholder='Enter SSID' autoComplete="off"/><br/>
									<input type='password' className='form-control' ref='wifiPassword' name='WiFiPassword' id='WiFiPassword' placeholder='Enter password'/><br/>
									<label className='checkbox-inline' id='wifiStatusLabel'>
										Wifi &emsp;&emsp;<input id='wifiStatus' type="checkbox" checked data-toggle="toggle" data-onstyle="primary" onChange={this.wifiStatusHandler}/>
									</label>
									<br/><br/>
									<button
							          className="btn btn-success center-block submit-button"
							          id='stdin-submit-button'
							          onClick={this.handleConfig}>
							          Save
						        </button>
				                </form>
							</div>
						</div>
					</div>
				</div>
				<div className='row'>
					<div className='col-xs-offset-4'>
						<div className='circuitSuccess' id='wifiConfigSettingsSuccess' hidden>
							<span>WiFi settings saved!</span>
						</div>
						<div className='circuitError' id='wifiConfigSettingsError' hidden>
							<span>Something went wrong!</span>
						</div>
					</div>
				</div>
			</div>
		);
	}
}
