import React, { FunctionComponent } from 'react';
import { ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
import { CallState, IP2PCall } from '../../../store/webrtc/types';
import { Logger } from '../../../utils/Log';
import { IImageHolderStyle, ImageHolder } from '../../common/ImageHolder';
import { IStyledProps } from '../../common/types';
import RTCView from '../RTCView';

const logger = new Logger('CallView');
export interface ICallViewStyleProps {
    localVideo?: ViewStyle;
    remoteVideo?: ViewStyle;
    shareVideo?: ViewStyle;
    thumbnail?: ImageStyle;
}
interface IProps extends IStyledProps<ICallViewStyleProps> {
    call: IP2PCall;
    renderIncomingCallView?: (call: IP2PCall) => React.ReactNode;
    renderOutgoingCallView?: (call: IP2PCall) => React.ReactNode;
    renderActiveCallView?: (call: IP2PCall) => React.ReactNode;
}

export const MyLocalWebrtcVideo: FunctionComponent<{ style?: ViewStyle }> = (props) => {
    const mergedLocalVideoStyle = { ...defaultStyle.localVideo, ...props.style }
    return (
        <View style={mergedLocalVideoStyle}>
            <RTCView streamURL="local" objectFit="cover" zOrder={2} style={mergedLocalVideoStyle} />
        </View>
    )
}

export const RemoteWebrtcVideo: FunctionComponent<{ style?: ViewStyle, call: IP2PCall }> = (props) => {
    const mergedRemoteVideo = { ...defaultStyle.remoteVideo, ...props.style }
    return (
        <View style={mergedRemoteVideo}>
            <RTCView streamURL="remote" objectFit="cover" zOrder={1} style={mergedRemoteVideo} />
        </View>
    )
}
export const SharingVideo: FunctionComponent<{ style?: ViewStyle, call: IP2PCall }> = (props) => {
    const mergedSharingVideo = { ...defaultStyle.shareVideo, ...props.style }
    return (
        <View style={mergedSharingVideo} >
            <RTCView streamURL="share" objectFit="cover" zOrder={3} style={mergedSharingVideo} />
        </View>
    )
}
export const P2PCallView: FunctionComponent<IProps> = ({
    call,
    renderIncomingCallView,
    renderOutgoingCallView,
    renderActiveCallView
}) => {
    const { callState, videoRemoteStreamCount, isLocalVideoEnabled, wasInitiatedWithVideo, isRemoteVideoEnabled, wasInitiatedWithShare } = call;
    const profilePictureView = (videoRemoteStreamCount === 0) && <ImageHolder url={call.callPeer.imageURL} style={participantImageStyle} name={call.callPeer.name} />;

    if (!call) {
        logger.error('Null call or null contact received');
        return null;
    }


    const renderIncomingCallComponent = () => {
        if (callState === CallState.RINGING_INCOMING) {
            if (renderIncomingCallView)
                return renderIncomingCallView(call);
            else {
                return profilePictureView;
            }
        } else { return null; }

    }
    const renderOutgoingCallComponent = () => {
        if (callState === CallState.RINGING_OUTGOING) {
            if (renderOutgoingCallView)
                return renderOutgoingCallView(call);
            else {
                return profilePictureView;
            }
        } else { return null; }

    }
    const renderActiveCallComponent = () => {
        if (callState !== CallState.ACTIVE) {
            return null;
        }
        if (renderActiveCallView) {
            return renderActiveCallView(call)
        }
        const remoteVideoDynamicStyle = wasInitiatedWithShare ? { width:150, height: 150, top:10 } : {};
        const remoteCombinedStyle = { ...defaultStyle.remoteVideo,...remoteVideoDynamicStyle };

        return (
            <>
                {!wasInitiatedWithVideo && profilePictureView}
                { wasInitiatedWithShare && <SharingVideo call={call} style={defaultStyle.shareVideo} />}
                { isRemoteVideoEnabled && <RemoteWebrtcVideo call={call} style={remoteCombinedStyle} />}
                {isLocalVideoEnabled && <MyLocalWebrtcVideo  style={defaultStyle.localVideo} />}
            </>
        )
    }

    return (

        <View style={{ flex: 1 }}>
            {renderIncomingCallComponent()}
            {renderOutgoingCallComponent()}
            {renderActiveCallComponent()}
        </View>

    );
};
const participantImageStyle: IImageHolderStyle = {
    thumbnail: { top: 100, alignSelf: 'center', width: 140, height: 140, borderRadius: 100 },
    thumbnailContainer: { position: 'absolute', top: 100, alignSelf: 'center', width: 140, height: 140, borderWidth: 1, borderColor: 'rgba(0,0,0,0.2)', borderRadius: 100, justifyContent: 'center', alignItems: 'center', backgroundColor: '#cf0071' },
    imageTextStyle: { fontSize: 50, }
}
const defaultStyle = StyleSheet.create({

    shareVideo: {  position: 'absolute', top: 20, width: '100%', height: 250, alignSelf: 'center', },
    localVideo: {  position: 'absolute', top: 10, end: 10, width: 150, height: 150, },
    remoteVideo: { position: 'absolute',width: '100%', height: 250, top :50},
    thumbnail: {   position: 'absolute', top: 100, alignSelf: 'center', width: 140, height: 140, },
});