import React, { FunctionComponent, useEffect, useState } from 'react';
import {
    ImageStyle,
    Platform,
    StyleSheet,
    Text,
    TextStyle,
    View,
    ViewStyle,
} from 'react-native';
import { Logger } from '../../../utils/Log';
import { IStyledProps } from '../../common/types';
import { IConference, IConferenceParticipants } from '../../../store/conference/types';
import RTCView from '../RTCView';
import { eventEmitter, EventType } from '../../../services/EventEmitter';
import { IImageHolderStyle, ImageHolder } from '../../common/ImageHolder';
import Icon from 'react-native-vector-icons/Ionicons';

const logger = new Logger('ParticipantConferenceView');

export interface IParticipantViewStyleProps {
    participantViewStyle?: ImageStyle;
    ParticipantDetailContainer?: ViewStyle;
    participantBackgroundViewStyle?: ViewStyle;
    miceIconStyle?: TextStyle;
    userNameStyle?: TextStyle;
    container?: ViewStyle;
    participantImageStyle?: IImageHolderStyle;
}
interface IProps extends IStyledProps<IParticipantViewStyleProps> {
    participant: IConferenceParticipants;
    renderParticipantDetailView?: () => React.ReactNode;
    renderParticipantProfileView?: () => React.ReactNode;
}

export const ParticipantConferenceView: FunctionComponent<IProps> = (props: IProps) => {
    const { participant, style } = props
    const [conferenceParticipant, setConferenceParticipant] = useState<IConferenceParticipants>(participant);
    const mergedStyle = { ...defaultStyle, ...style };
    const mergedParticipantImageStyle = { ...participantImageStyle, ...style?.participantImageStyle };

    useEffect(() => {
            setConferenceParticipant(participant)
       
            const conferenceParticipantStatusUpdate = eventEmitter.addListener(EventType.ConferenceParticipantStatusUpdate, (updatedParticipant: IConferenceParticipants) => {
                logger.info(`ConferenceParticipantStatusUpdate with name ${updatedParticipant.name}`);
                if (updatedParticipant.jId === conferenceParticipant.jId) {
                    setConferenceParticipant(updatedParticipant);
                }
            });
            return () => {
                conferenceParticipantStatusUpdate.remove();
            }
    }, [conferenceParticipant, participant.isVideoSubscribed, participant]);
    
    const ParticipantDetail = () => {
        if (props.renderParticipantDetailView) {
            return props.renderParticipantDetailView();
        }
        else {
            return (
                <View style={mergedStyle.ParticipantDetailContainer}>
                    <Icon
                        name={conferenceParticipant.isMuted ? 'mic-off' : 'mic'}
                        size={20}
                        color="white"
                    />
                    <Text numberOfLines={1} style={mergedStyle.userNameStyle}>{conferenceParticipant.name}</Text>
                </View>
            );
        }

    };
    const renderUserView = () => {
        if (props.renderParticipantProfileView) {
            return props.renderParticipantProfileView();
        } else {
            return (
                conferenceParticipant.isVideoSubscribed ?
                    <RTCView streamURL={conferenceParticipant.participantId} objectFit="cover" zOrder={0} style={mergedStyle.participantViewStyle} key={conferenceParticipant.participantId} />
                    :
                    <View style={mergedStyle.participantViewStyle}>
                        <ImageHolder url={conferenceParticipant.imageURL} style={mergedParticipantImageStyle} name={conferenceParticipant.name} />
                    </View>
            )
        }
    }
    return (
        <View style={mergedStyle.container}>
            {renderUserView()}
            {ParticipantDetail()}
        </View>
    );
};


const participantImageStyle: IImageHolderStyle = {
    thumbnail: {
        width: 150,
        height: 150,
        position: 'absolute',
        zIndex: 2,
        borderRadius: 50
    },
    imageTextStyle: {
        color: 'white',
        fontSize: 45,
        fontWeight: 'bold'
    }
}


const defaultStyle: IParticipantViewStyleProps = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center'
    },
    participantViewStyle: {
        width: 150,
        height: 150,
        zIndex: 0
    },
    participantBackgroundViewStyle: {
        justifyContent: 'center',
    },
    ParticipantDetailContainer: {
        marginTop: 10,
        backgroundColor: '#707680',
        flexDirection: 'row',
        alignItems:'center',
    },
    userNameStyle: {
        color: 'white',
        fontSize: 20,
        marginLeft: 5,
        width: 130,
        maxWidth: 130,
        textAlign: 'center'
    }
});