import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet, Text, View } from "react-native";
import { MediaStream, RTCView } from "react-native-webrtc";

interface VideoStreamProps {
    stream: MediaStream | null;
    isMirrored?: boolean;
    style?: any;
}

export default function VideoStream({
    stream,
    isMirrored = false,
    style,
}: VideoStreamProps) {
    return (
        <View style={[styles.video, style]}>
            {stream ? (
                <RTCView
                    streamURL={stream.toURL()}
                    style={{ flex: 1 }}
                    objectFit="cover"
                    mirror={isMirrored}
                />
            ) : (
                <View style={styles.unConnectedVideo}>
                    <MaterialIcons name="tv-off" size={100} color="lightgray" />
                    <Text style={styles.text}>The video is turned off.</Text>
                </View>
            )}  
        </View>
    );
}

const styles = StyleSheet.create({
    video: {
        flex: 1,
        overflow: "hidden",
        position: "relative",
    },
    unConnectedVideo: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#333',
    },
    text: {
        marginTop: 10,
        fontSize: 16,
        color: '#888',
        fontWeight: '500',
    },
});