import React, { FunctionComponent } from 'react';
import { StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
import { IConference, IConferenceParticipants } from '../../../store/conference/types';
import { IImageHolderStyle, ImageHolder } from '../../common/ImageHolder';
import { CallState } from '../../../store/webrtc/types';
import { FlatGrid } from 'react-native-super-grid';
import { ParticipantConferenceView } from './ParticipantView';
import { IStyledProps } from '../../common/types';
import { Strings } from '../../../resources/localization/Strings';
import { ConferenceLocalVideo } from './ConferenceVideoViews';

export interface ICallViewStyleProps {
    localVideoStyle?: ViewStyle;
    callProfileImageStyle?: IImageHolderStyle;
    incomingCallInvitedMsg?: TextStyle;
    participantItemContainer?: ViewStyle;
    participantListStyle?: ViewStyle;
}
interface IProps extends IStyledProps<ICallViewStyleProps> {
    conferenceCall: IConference;
    renderIncomingCallView?: (conferenceCall: IConference) => React.ReactNode;
    renderOutgoingCallView?: (conferenceCall: IConference) => React.ReactNode;
    renderActiveCallView?: (conferenceCall: IConference) => React.ReactNode;
}

export const ConferenceCallView: FunctionComponent<IProps> = (props: IProps) => {
    const mergedStyle = { ...defaultStyle, ...props.style }
    const callProfileImageStyle = { ...participantImageStyle, ...props.style?.callProfileImageStyle }
    const { callState, isLocalVideoEnabled, attendees } = props.conferenceCall;
    const { imageURL, bubbleOwner, name } = props.conferenceCall.callPeer;
    const profilePictureView = <ImageHolder url={imageURL} style={callProfileImageStyle} name={name} />;
    
    const renderParticipantItem = ({ item }: { item: IConferenceParticipants }) => {
        return (
            <View style={mergedStyle.participantItemContainer}>
                <ParticipantConferenceView participant={item} key={item.participantId} />
            </View>
        )
    }
    const renderConferenceParticipant = () => {
        const attendeesWithoutMyUser = attendees.filter((item: IConferenceParticipants) => { return !item.isMyUser });

        return (
             <FlatGrid
                itemDimension={140}
                data={attendeesWithoutMyUser}
                style={mergedStyle.participantListStyle}
                spacing={10}
                renderItem={renderParticipantItem}
            />
        )
    }

    const renderIncomingCallView = () => {
        if (callState === CallState.RINGING_INCOMING) {
            if (props.renderIncomingCallView) {
                return props.renderIncomingCallView(props.conferenceCall);
            }
            else {
                return (
                    <>
                        <Text style={mergedStyle.incomingCallInvitedMsg}>{`${bubbleOwner.name} ${Strings.ConferenceCallInvitation} ${name} `}</Text>
                        {profilePictureView}
                    </>
                );
            }
        }
        else { return null }
    }

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

    const renderActiveCallView = () => {
        if (callState === CallState.ACTIVE) {
            if (props.renderActiveCallView) {
                return props.renderActiveCallView(props.conferenceCall);
            }
            else {
                return (
                    <>
                        {isLocalVideoEnabled && <ConferenceLocalVideo style={props.style?.localVideoStyle} />}
                        {renderConferenceParticipant()}
                    </>
                )

            }
        }
        else { return null }
    }

    return (
        <View style={{flex: 1}}>
            {renderIncomingCallView()}
            {renderOutgoingCallView()}
            {renderActiveCallView()}
        </View>
    );
}

const defaultStyle = StyleSheet.create({
    incomingCallInvitedMsg: {
        fontSize: 15,
        color: '#ffffff',
        margin: 20,
        alignSelf: 'center'
    },
    participantListStyle: {
        marginTop: 10,
        flex: 1
    },
    participantItemContainer: {
        backgroundColor: '#02a2ff',
        borderRadius: 5,
        padding: 5,
       
        flexWrap: 'wrap',
        flexDirection: 'column'
    },
});
const participantImageStyle: IImageHolderStyle = {
    thumbnail: {
        position: 'absolute',
        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: {
        color: 'white',
        fontSize: 25,
        fontWeight: 'bold'
    }
};