import React, { FunctionComponent } from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import RTCView from '../RTCView';
interface IProps {
    style?: ViewStyle;
    zOrder?: number;
    renderActionButtons?: () => React.ReactNode;

}

export const ConferenceScreenSharingView: FunctionComponent<IProps> = (props: IProps) => {
    const mergedStyle = { ...defaultStyle.shareVideo, ...props.style };
    const zOrder = props.zOrder ?? 0;
    return (
        <RTCView streamURL="shareConference" objectFit="contain" zOrder={100} style={mergedStyle} />
    );
};

export const ConferenceLocalVideo: FunctionComponent<IProps> = (props) => {
    const mergedVideoStyle = { ...defaultStyle.localVideoStyle, ...props.style }
    const zOrder = props.zOrder ?? 0;
    const renderActionButton = () => {
        if ( props.renderActionButtons)
         return props.renderActionButtons();  
        else return undefined;
    }
    return (
        <View style={{  zIndex: 1, position: 'absolute', width: 120,height: 120,top: -40,  end: 30 }}>
            <RTCView streamURL={'MyVideoConference'} objectFit="cover" zOrder={zOrder} style={mergedVideoStyle} />
            {renderActionButton()}
        </View>
    );
}
const defaultStyle = StyleSheet.create({
    shareVideo: {
        width: '100%',
        height: '100%',
    },
    localVideoStyle: {
        width: 120,
        height: 120,
        zIndex: 1
    },
});