import { thisExpression } from "@babel/types";
import SockJS from 'sockjs-client';
import './ws.scss';

let url = `https://api.ourfor.top/blog`;

class Hello extends Component {

    constructor(props){
        super(props);
        this.state = {
            data: [],
            stomp: null,
            connectStyle: 'ws-btn',
            client: null,
        }
    }

    connect = e => {
        let client = this.state.client;
        if(client==null){
            var socket = new SockJS(`${url}/ws`);
            client = Stomp.over(socket);
            client.connect({}, frame => {
                console.log('Connected: ' + frame);
                client.subscribe(`/topic/login`, res => {
                    let data = this.state.data;
                    data.push(JSON.parse(res.body).content);
                    this.setState({
                        data,
                    });
                });
                this.setState(state => {
                    return {
                        client,
                        connectStyle: 'clicked'
                    }
                });
            }); 
        }
        
        
    }

    send = e => {
        let client = this.state.client;
        client.send(`/app/hello`, {}, JSON.stringify({'name': 'catalina'}));
    }

    render(){
        let data = this.state.data;
        let content = data.map((v,i) => {
            return <div key={`hello-${i}`}>{v}</div>
        });
        return (
            <div className="ws-dialog">
            <div>
                <button className={this.state.connectStyle} onClick={this.connect}>connect</button>
                <button className='ws-btn' onClick={this.send}>send</button>
            </div>
            <div>
                {content}
            </div>
            </div>
        );
    }
}

export default Hello;