import React, { Component } from 'react';
import * as signalR from'@aspnet/signalr';

class SignalrTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nick: '',
            message: '',
            messages: [],
            hubConnection: null,
          };
        this.joingroup = this.joingroup.bind(this);
        this.sendMesg = this.sendMesg.bind(this);
    }

    componentDidMount() {
        const protocol = new signalR.JsonHubProtocol();
        const transport = signalR.HttpTransportType.WebSockets;
        const options = {
        transport,
        logMessageContent: true,
        logger: signalR.LogLevel.Trace,
        accessTokenFactory: () => this.props.accessToken,
        };

        this.state.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl("https://localhost:44336/chatHub", options)
        .withHubProtocol(protocol)
        .build();

        this.state.hubConnection.start()
        .then(() => console.info('SignalR Connected'))
        .catch(err => console.error('SignalR Connection Error: ', err));
    }

    joingroup(){
        
    }

    sendMesg(){
        this.state.hubConnection
          .invoke('SendMessage', this.state.nick, this.state.message)
          .catch(err => console.error(err));
    
          this.setState({message: ''}); 
    }

    setUser(e){
        this.setState({
            nick : e.target.value
        });
    }

    setMesg(e){
        this.setState({
            message : e.target.value
        });
    }

    render() {
    
        return (
            <>
                <div>
                    <input type="button" value="Join Group" id="btnPrivateGroup" onClick={this.joingroup} />
                </div>
                <div>
                    <div>&nbsp;</div>
                    <div>
                        <div>User</div>
                        <div><input type="text" id="userInput" onChange={this.setUser.bind(this)} /></div>
                    </div>
                    <div>
                        <div>Message</div>
                        <div><input type="text" id="messageInput" onChange={this.setMesg.bind(this)} /></div>
                    </div>
                    <div>&nbsp;</div>
                    <div>
                        <div>
                            <input type="button" id="sendButton" value="Send Message" onClick={this.sendMesg} />
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        <hr />
                    </div>
                </div>
                <div>
                    <div>
                        <ul id="messagesList"></ul>
                    </div>
                </div>
            </>
        );
    };
}

export default SignalrTest