import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Centrifuge from 'centrifuge';

export default class App extends React.Component {

  componentDidMount() {
    console.log("componentDidMount")
    var timestamp = Math.floor(Date.now() / 1000);
    var centrifuge = new Centrifuge({
      url: 'ws://192.168.0.103:8000/connection/websocket',
      user: '',
      token: 'xyzhello',
      timestamp: timestamp.toString()
    });

    var callbacks = {
      "message": function(message) {
          // See below description of message format
          console.log("centrifuge.message",message);
      },
      "join": function(message) {
          // See below description of join message format
          console.log("centrifuge.join",message);
      },
      "leave": function(message) {
          // See below description of leave message format
          console.log("centrifuge.leave",message);
      },
      "subscribe": function(context) {
          // See below description of subscribe callback context format
          console.log("centrifuge.subscribe",context);
      },
      "error": function(errContext) {
          // See below description of subscribe error callback context format
          console.log("centrifuge.error",err);
      },
      "unsubscribe": function(context) {
          // See below description of unsubscribe event callback context format
          console.log("centrifuge.unsubscribe",context);
      }
  }

  var subscription = centrifuge.subscribe("news", callbacks);
  subscription.publish({"input": "hello world"}).then(function() {
    // success ack from Centrifugo received
    console.log("message sent");
  }, function(err) {
      // publish call failed with error
      console.log("send message failed",err);
  });

  centrifuge.connect();

  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up app.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});