import React, { FunctionComponent } from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { CallState, IP2PCall } from '../../../store/webrtc/types';
import { IStyledProps } from '../../common/types';
import { MicButton, LoudspeakerButton, SwitchCameraButton } from '../CallActionButtons';
import { EndP2PCallButton, AnswerAudioCallButton, AnswerVideoCallButton, AddVideoButton } from './P2PCallActionButtons';

interface IProps extends IStyledProps<{ actionsContainer: ViewStyle; }> {
    call?: IP2PCall;
    renderIncomingP2PCallActions?: (p2pCall: IP2PCall) => React.ReactNode;
    renderOutgoingP2PCallActions?: (p2pCall: IP2PCall) => React.ReactNode;
    renderActiveP2PCallActions?: (p2pCall: IP2PCall) => React.ReactNode;
}

export const P2PCallActions: FunctionComponent<IProps> = ({
    call,
    style,
    renderActiveP2PCallActions,
    renderIncomingP2PCallActions,
    renderOutgoingP2PCallActions
}) => {
    if (!call) {
        return null;
    }
    const {
        callState,
        wasInitiatedWithVideo: isVideoCall,
    } = call;
    style = { ...defaultStyle, ...style };
    const isOutgoingCall = callState === CallState.RINGING_OUTGOING;
    const isIncomingCall = callState === CallState.RINGING_INCOMING;
    const isActiveCall = callState === CallState.ACTIVE;
    const endCallButton = <EndP2PCallButton call={call} />
    const answerAudioCallButton = <AnswerAudioCallButton call={call} />
    const answerVideoCallButton = <AnswerVideoCallButton call={call} />
    const micButtonView = <MicButton />;
    const loudspeakerButtonView = <LoudspeakerButton />;
    const switchCameraButton = <SwitchCameraButton />
    const addVideoButton = <AddVideoButton call={call} />
    const answerVideoCallButtonView = isVideoCall && answerVideoCallButton;
    const answerAudioCallButtonView = !isVideoCall && answerAudioCallButton;
    const switchCameraButtonView = call.isLocalVideoEnabled && switchCameraButton;

    const incomingP2PCallActions = () => {
        if (isIncomingCall) {
            if (renderIncomingP2PCallActions) {
                return renderIncomingP2PCallActions(call);
            }
            else {
                return (
                    <>
                        {answerAudioCallButtonView}
                        {answerVideoCallButtonView}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }
    const outgoingP2PCallActions = () => {
        if (isOutgoingCall) {
            if (renderOutgoingP2PCallActions) {
                return renderOutgoingP2PCallActions(call);
            }
            else {
                return (
                    <>
                        {micButtonView}
                        {loudspeakerButtonView}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }

    const activeP2PCallActions = () => {
        if (isActiveCall) {
            if (renderActiveP2PCallActions) {
                return renderActiveP2PCallActions(call);
            }
            else {
                return (
                    <>
                        {micButtonView}
                        {loudspeakerButtonView}
                        {switchCameraButtonView}
                        {addVideoButton}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }

    return (
        <View style={{ ...defaultStyle.actionsContainer, ...style.actionsContainer }}>
            {incomingP2PCallActions()}
            {outgoingP2PCallActions()}
            {activeP2PCallActions()}
        </View>
    );
};

const defaultStyle = StyleSheet.create({
    actionsContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignContent: 'center',
        justifyContent: 'space-around',
        zIndex: 99,
        marginBottom: 80
        
    
    },
});