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

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

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

    componentDidMount() {
        this.connect();

        this.setState({ioState: {
            dout: [false, true, false, false],
            din: [false, false, true, false]
        }});
    }

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

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

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

        socket.on('ioState', (data) => {
            console.log(data);
            this.setState({ioState: data});
        });
    }

    sendUpdate(type, pin, value) {
        this.state.socket.emit('update', {
            type: type,
            pin: pin,
            value: value,
        });
    }

    render() {
        return (
            <div className="ui text container">
                <div className="ui stackable two column grid">
                    <div className="one column row">
                        <div className="center aligned column">
                            <div className="ui basic segment">
                                <img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" />
                                <span className="ui medium header">Modem I/O Demo</span>
                            </div>
                        </div>
                    </div>
                    {this.state.ioState && <div className="column">
                        <div className="ui segment">
                            <div className="ui top attached label">Digital Out</div>
                                {this.state.ioState.dout.map((x, i) => (
                                    <div className="ui two column middle aligned grid">
                                        <div className="twelve wide column">
                                            <div className="ui right pointing label">
                                                  DO{i+1}
                                            </div>
                                            <div className="ui buttons">
                                              <button onClick={() => this.sendUpdate('dout', i, true)} className="ui red button">On</button>
                                              <button onClick={() => this.sendUpdate('dout', i, false)} className="ui button">Off</button>
                                            </div>
                                        </div>
                                        <div className="four wide right aligned column">
                                            {!x && <i className="bordered inverted disabled idea big icon"></i>}
                                            {x && <i className="bordered inverted red idea big icon"></i>}
                                        </div>
                                    </div>
                                ))}
                        </div>
                    </div>}
                    {this.state.ioState && <div className="column">
                        <div className="ui segment">
                            <div className="ui top attached label">Digital In</div>
                                {this.state.ioState.din.map((x, i) => (
                                    <div className="ui two column middle aligned grid">
                                        <div className="four wide column">
                                            <div className="ui right pointing label">
                                                  DI{i+1}
                                            </div>
                                        </div>
                                        <div className="twelve wide center aligned column">
                                            {!x && <i className="bordered inverted disabled circle big icon"></i>}
                                            {x && <i className="bordered inverted red circle thin big icon"></i>}
                                        </div>
                                    </div>
                                ))}
                        </div>
                    </div>}
                </div>
            </div>
       );
    }
}