import React from 'react';
import io from 'socket.io-client';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            socket: io.connect()
        }
    }

    componentDidMount() {
        this.connect();

    }

    componentWillMount() {
		document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
    }

    componentWillUnmount() {
        this.setState({socket: this.state.socket.removeAllListeners()});
    }

    connect() {
        let socket = this.state.socket;

        socket.on('connect', () => {
            console.log('Connected!');
        });
    }

	sendOn() {
        this.state.socket.emit('update', '1');
		console.log('On sent.');
	}

	sendOff() {
        this.state.socket.emit('update', '0');
		console.log('Off sent.');
	}

    render() {
        return (
            <div className="ui text container">
				<div className="ui basic center aligned segment">
					<img className="ui centered image" src="logo.png" />
					<h3 className="ui header">Remote Control Lightswitch</h3>
				
					<div className="ui compact raised segments">
						<div className="ui segment">
							<i onClick={() => this.sendOn()} className="bordered inverted yellow idea huge icon"></i>
						</div>
						<div className="ui segment">
							<i onClick={() => this.sendOff()} className="bordered inverted disabled idea huge icon"></i>
						</div>
					</div>
				</div>
            </div>
       );
    }
}