import React, { useEffect, useState } from 'react';
import {
    Button,
    Platform,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity
} from 'react-native';



import {
    RTCPeerConnection, RTCView, mediaDevices
} from 'react-native-webrtc';


import WebrtcSimple from 'react-native-webrtc-simple'
import { callToUser, joinGroup, leaveGroup, listeningRemoteCall, peerConnection, reconnect, startGroup, startStream } from 'react-native-webrtc-simple/WebRtcSimple/peer';


import { globalCall, GlobalCallUI } from 'react-native-webrtc-simple/UIKit';
import { jsxOpeningElement } from '@babel/types';

export const globalCallRef = React.createRef();
// import io from 'socket.io-client';
const App = _props => {



    const [sessionId, setSessionId] = useState(null);

    const [calleid, setCalleeId] = useState(null);


    const [lstream, setLstream] = useState(null);


    const [isFront, setisFront] = useState(true);

    const configuration = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] };



    const pc = new RTCPeerConnection(configuration);


    useEffect(() => {
        console.log('hjyh');
        // pc.onicecandidate = (event) => {
        //     console.log(event);
        // }

        // pc.connectionState = (event) => {
        //     console.log(event);
        // }

    }, []);




    const start = () => {




        mediaDevices.enumerateDevices().then(sourceInfos => {
            // console.log(sourceInfos);
            let videoSourceId;
            for (let i = 0; i < sourceInfos.length; i++) {
                const sourceInfo = sourceInfos[i];
                if (sourceInfo.kind == "videoinput" && sourceInfo.facing == (isFront ? "front" : "environment")) {
                    videoSourceId = sourceInfo.deviceId;
                }
            }
            mediaDevices.getUserMedia({
                audio: true,
                video: {
                    width: 110,
                    height: 110,
                    frameRate: 20,
                    facingMode: (isFront ? "user" : "environment"),
                    deviceId: videoSourceId
                }
            })
                .then(s => {
                    setLstream(s)
                    pc.addStream(s)



                })
                .catch(esquery => {
                    // Log error
                });
        });
    }

   


    const pec = () => {

        pc.onicecandidate = (e) => {
            console.log("Candidate:" + e)
        }
        pc.onicecandidateerror = () => {
            console.log("createOffer:")
        }

        pc.createOffer().then(desc => {
            pc.setLocalDescription(desc).then(() => {
                console.log(desc);
            });
        });
    }


    const answer = () => {


        pc.createAnswer().then(desc => {
            pc.setLocalDescription(desc).then(() => {
                console.log("answer:" + desc);
            })

        }
        )


    }


    const stop = () => {
        console.log('stop');
        if (lstream) {
            lstream.release();
            setLstream(null);
            setSessionId(null)
        }
    };



    const callToUser = (callId: string) => {
        pec();
    };


    return (
        <View style={styles.container}>


            {
                lstream &&

                <RTCView
                    mirror={false}
                    objectFit='cover'
                    style={{ width: '100%', height: '60%', backgroundColor: 'black' }}
                    streamURL={lstream.id}
                />
            }
            <Text>{sessionId}</Text>
            <TouchableOpacity
                onPress={() => start()}
                style={{ backgroundColor: 'green', width: '90%', height: 30, alignItems: 'center', borderRadius: 30, marginTop: 20 }}
            >

                <Text>
                    START

                </Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => stop()}
                style={{ backgroundColor: 'green', width: '90%', height: 30, alignItems: 'center', borderRadius: 30, marginTop: 20 }}
            >

                <Text>
                    STOP

                </Text>
            </TouchableOpacity>
            <TextInput
                onChangeText={(t) => setCalleeId(t)}
                style={{ width: '90%', height: 50, color: 'black', borderWidth: 1, marginTop: 10, borderRadius: 30 }}
            />
            <TouchableOpacity
                onPress={() => callToUser()}
                style={{ backgroundColor: 'green', width: '90%', height: 30, alignItems: 'center', borderRadius: 30, marginTop: 20 }}
            >

                <Text>
                    Call

                </Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => answer()}
                style={{ backgroundColor: 'green', width: '90%', height: 30, alignItems: 'center', borderRadius: 30, marginTop: 20 }}
            >

                <Text>
                    Answer Call

                </Text>
            </TouchableOpacity>
            {/* <View style={{ flexDirection: 'row' }}>
                <Text style={{ fontSize: 30, marginRight: 10 }}>{userId}</Text>
                {userId && (
                    <View style={styles.btn2}>
                        <Button
                            title="Refresh"
                            color={Platform.OS === 'ios' ? 'white' : 'black'}
                            onPress={() => {
                                globalCall.refresh(status => {
                                    if (status) {
                                        alert('success');
                                    }
                                });
                            }}
                        />
                    </View>
                )}
            </View>

            <View style={styles.rowbtn}>
                <TextInput
                    style={styles.textInput}
                    autoCapitalize="none"
                    keyboardType="default"
                    placeholder="Enter id"
                    onChangeText={text => {
                        setCallId(text);
                    }}
                />
                {userId && (
                    <View style={styles.btn}>
                        <Button
                            title="Call"
                            color={Platform.OS === 'ios' ? 'white' : 'black'}
                            onPress={() => {
                                callToUser(callId);
                            }}
                        />
                    </View>
                )}
            </View>
            <GlobalCallUI ref={globalCallRef} /> */}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    rowbtn: {
        flexDirection: 'row',
        paddingHorizontal: 16,
        alignItems: 'center',
        marginVertical: 8,
    },
    btn: {
        margin: 16,
        backgroundColor: 'black',
        paddingHorizontal: 10,
    },
    btn2: {
        backgroundColor: 'black',
        paddingHorizontal: 10,
    },
    textInput: {
        width: 200,
        height: 50,
        borderWidth: 0.5,
        borderColor: 'gray',
        paddingHorizontal: 12,
    },
});

export default App;