import type { Ref } from 'react';
import React, { Component } from "react";
import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import OpenTok, { Publisher } from 'react-native-opentok';
import Icon from 'react-native-vector-icons/Ionicons';

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

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


export default class Publish extends Component<{}> {

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

    openTokConnect = async () => {
        await OpenTok.connect(sessionId, token);
    };

    ref: Ref<typeof Publisher>;

    render() {

        return (
            <View style={styles.container}>
                <View style={{ flex: 0.7 }}>
                    <Publisher
                        sessionId={sessionId}
                        onPublishStart={() => {
                            console.log('started')
                        }}
                        style={styles.publisher}
                        ref={ref => {
                            this.ref = ref;
                        }}
                    />
                </View>
                <View style={{ flex: 0.15, flexDirection: 'row' }}>
                    <View style={{ flex: 0.2 }}></View>
                    <TouchableOpacity
                        style={styles.iconBox}
                        onPress={() => {
                            if (typeof this.ref !== 'string') this.ref.switchCamera()
                        }}>
                        <Icon
                            name="ios-reverse-camera"
                            size={40} color="white" style={{ fontWeight: 'bold' }}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.iconBox}>
                        <Icon
                            name="ios-volume-off"
                            size={40} color="white" style={{ fontWeight: 'bold' }}
                        />
                    </TouchableOpacity>
                    <View style={{ flex: 0.2 }}></View>
                </View>
                <View style={{ flex: 0.15, flexDirection: 'row' }}>
                    <TouchableOpacity
                        style={styles.cancelBtn}
                        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,
    },
    publisher: {
        backgroundColor: 'black',
        height: height,
        width: width
    },
    iconBox: {
        flex: 0.3,
        margin: 5,
        alignItems: 'center',
        borderRadius: 5,
        justifyContent: 'center',
        borderWidth: 1,
        backgroundColor: "transparent",
        borderColor: 'white'
    },
    cancelBtn: {
        backgroundColor: '#E74C3C',
        flex: 1,
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    headerIcon: {
        flex: 0.1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 5,
        paddingTop: 10
    }
});