import React, {Component} from 'react';
import {
    Platform,
    Text,
    View,
    Button
} from 'react-native';
import styles from './styles'
import AWSIoTMQTT from '../../../node_modules/react-native-aws-iot-device-shadows/index.js';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const accessKeyId = 'my_IAM_key_ID?';
const secretAccessKey = 'my_IAM_secret_key_ID?';
const sessionToken = ' ';

class DefaultScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            answer: ' ',
            device: {
                deviceId: "my_device_id",
                temp: 80
            }
        };
        this.AWSIoTMQTT = null;
    }

    componentDidMount() {
        // trigger STS credentials from Cognito Pool
        this.AWSIoTMQTT.shadow.updateWebSocketCredentials(
            accessKeyId,
            secretAccessKey,
            sessionToken
        );
    }

    onConnect() {
        this.AWSIoTMQTT.addThing(this.device.deviceId);
    }

    onDelta(thingId, stateObject) {
        if (stateObject.state.device && stateObject.state.device.temp) {
            this.updateState(thingId, {
                temp: stateObject.state.temp
            });
        }
    }

    updateShadow(key) {
        const current = this.data.device;

        const update = {
            [key]: ((Math.floor(Math.random() * (99 - 1)) + 1))
        };

        this.AWSIoTMQTT.shadow.update(current.deviceId, {
            state: {
                desired: update
            }
        });
    }

    onThingConnected(thingId) {
        this.AWSIoTMQTT.shadow.get(thingId);
    }

    updateState(thingId, sensors) {
        Object.assign(this.device, sensors);

        this.setState({
            device
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
                <Text>
                    {this.state.answer}
                </Text>

                <AWSIoTMQTT
                    ref={(ref) => { this.AWSIoTMQTT = ref; }}
                    type="shadow"
                    region="us-east-2"
                    host="my_host"
                    onReconnect={() => this.onConnect()}
                    onConnect={() => this.onConnect()}
                    onDelta={(thingId, stateObject) => this.onDelta(thingId, stateObject)}
                    onStatus={(thingId, statusType, clientToken, stateObject) =>
                        this.onStatus(thingId, statusType, clientToken, stateObject)}
                    onThingConnected={(thingId) => { this.onThingConnected(thingId); }}
                />
                <Button
                    title = 'Update Shadow Randomly'
                    onPress={() => this.updateShadow('temp')}
                />
            </View>
        );
    }
}

export default DefaultScreen