import type { Ref } from 'react';
import React, { Component } from "react";
import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import OpenTok, { Subscriber } from 'react-native-opentok';

var { height, width } = Dimensions.get('window');

const sessionId = '1_MX40NjA2NjM1Mn5-MTUxOTM4MTk5ODc5Mn5hUnFycTQzczR4cm90bGtoejNSTWdWVkV-fg';
const token = 'T1==cGFydG5lcl9pZD00NjA2NjM1MiZzaWc9YTg0YzczOWYxMjE0ODg2OWMwZmRjODkzZjQ5YzI5YmIxMjViMDc0YjpzZXNzaW9uX2lkPTFfTVg0ME5qQTJOak0xTW41LU1UVXhPVE00TVRrNU9EYzVNbjVoVW5GeWNUUXpjelI0Y205MGJHdG9lak5TVFdkV1ZrVi1mZyZjcmVhdGVfdGltZT0xNTE5Mzg2NjAzJm5vbmNlPTAuMTQ3MjAwNTY3Nzk0MDYwNjUmcm9sZT1zdWJzY3JpYmVyJmV4cGlyZV90aW1lPTE1MTk5OTE0MDImaW5pdGlhbF9sYXlvdXRfY2xhc3NfbGlzdD0=';


export default class Viewer extends Component<{}> {

    constructor(props) {
        super(props);
        this.openTokConnect();
    }

    openTokConnect = async () => {
        await OpenTok.connect(sessionId, token);
        OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
    };

    ref: Ref<typeof Viewer>;

    render() {

        return (
            <View style={styles.container}>
                <View style={{ flex: 0.9 }}>
                    <Subscriber
                        sessionId={sessionId}
                        style={{ backgroundColor: 'black', height: height, width: width, }}
                        ref={ref => {
                            this.ref = ref;
                        }}
                    />
                </View>
                <View style={{ flex: 0.1, flexDirection: 'row' }}>
                    <TouchableOpacity
                        style={styles.cancel}
                        onPress={() => this.cancelAndBack()}>
                        <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>Cancel</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    cancelAndBack() {
        OpenTok.disconnect(sessionId);
        this.props.navigation.goBack()
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    cancel: {
        backgroundColor: '#E74C3C',
        flex: 1,
        margin: 5,
        alignItems: 'center',
        borderRadius: 5,
        justifyContent: 'center'
    }
});