import React, { useEffect, useState } from 'react';
import { ViewStyle, TextStyle, TouchableOpacity, View, Text } from 'react-native';
import { eventEmitter, EventType } from '../../services/EventEmitter';
import { Logger } from '../../utils/Log';
import { IUser } from '../../store/userProfile/types';
import { IContact, Presence } from '../../store/contacts/types';
import { PresenceIcon } from '../presence';
import { Strings } from '../../resources/localization/Strings';
import { ImageHolder } from '../common/ImageHolder';
import { userProfileService } from '../../services/UserProfile-service';
import { useNavigation } from '@react-navigation/native';

const logger = new Logger('ConnectedUserProfile');
interface ISideMenuStyleProps {
    presenceIcon?: any;
    name?: TextStyle;
    icon?: any;
    contactInfo?: ViewStyle;
    profilePic?: ViewStyle;
    menuContentContainer?: ViewStyle;
    safeArea?: ViewStyle;
    nameText?: TextStyle;
    backButtonText?: TextStyle;
    leftView?: ViewStyle;
    menuHeader?: ViewStyle;
}
const ConnectedUserProfile: React.FunctionComponent = () => {
    const navigation = useNavigation();
    const [connectedUser, setConnectedUser] = useState<IUser>();
    const [connectedUserPresence, setConnectedUserPresence] = useState<Presence>(connectedUser?.contact?.presence ?? Presence.offline);

    useEffect(() => {
        userProfileService.getConnectedUser();
        const connectedUserUpdatedEvent = eventEmitter.addListener(
            EventType.ConnectedUserUpdated,
            (eventData: IUser) => {
                logger.info(`ConnectedUserUpdated: ${eventData}`);
                setConnectedUser(eventData);
                setConnectedUserPresence(eventData.contact?.presence)
            }
        );
        const connectedUserPresenceUpdatedEvent = eventEmitter.addListener(
            EventType.ConnectedUserPresenceUpdated,
            (eventData: { presence: Presence; contactJId: string }) => {
                logger.info(`connectedUserPresenceUpdatedEvent: ${eventData.presence}`);
                setConnectedUserPresence(eventData.presence);
            }
        )

        return () => {
            connectedUserUpdatedEvent.remove();
            connectedUserPresenceUpdatedEvent.remove();
        }
    }, [connectedUser?.contact?.presence]);
    const onPressBackButton = () => {
        navigation.goBack();
    }
    const connectedUserInfoUI = () => {
        if (connectedUser?.contact) {
            const myUserContact: IContact = connectedUser.contact;
            return (
                <>
                    <View style={defaultStyle.profilePic}>
                        <ImageHolder url={myUserContact.imageURL} name={myUserContact.name} />
                        <PresenceIcon presence={connectedUserPresence} style={defaultStyle.icon} />
                    </View>
                    <View style={defaultStyle.contactInfo}>
                        <Text style={[defaultStyle.name, defaultStyle.nameText]}>
                            {myUserContact.name ? myUserContact.name.split('\n')[0].slice(0, 15) : ''}
                        </Text>
                        <Text style={defaultStyle.name}>{myUserContact.companyName}</Text>
                        {connectedUserPresence && <Text style={defaultStyle.name}>{Strings.presenceOption[connectedUserPresence]}</Text>}
                    </View>
                </>
            );
        }
        return null;
    }

    return (
        <View style={defaultStyle.menuHeader}>
            {connectedUserInfoUI()}
            <View style={defaultStyle.leftView}>
                <TouchableOpacity onPress={onPressBackButton}>
                    <Text style={defaultStyle.backButtonText}>Done</Text>
                </TouchableOpacity>
            </View>

        </View>
    )
};

export const UserProfile = ConnectedUserProfile;

const defaultStyle: ISideMenuStyleProps = {
    presenceIcon: {
        position: 'relative',
        top: 0,
        width: 22,
        height: 22,
        marginLeft: 15,
        marginEnd: 18,
        borderColor: 'white',
        borderRadius: 40,
        borderWidth: 1
    },
    name: {
        color: '#fff',
        fontSize: 15,
        maxWidth: 180
    },
    backButtonText: {
        color: 'white',
        fontWeight: 'bold'
    },
    leftView: {
        position: 'absolute',
        top: 10,
        right: 20
    },
    contactInfo: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center'
    },
    menuHeader: {
        backgroundColor: '#0086CF',
        display: 'flex',
        flexDirection: 'row',
        paddingTop: 10,
        paddingBottom: 10
    },
    profilePic: {
        width: 60,
        height: 60,
        marginRight: 20,
        marginLeft: 20,
    },
    icon: {
        marginTop: 50, alignSelf: 'flex-end'
    },
    nameText: { fontSize: 18 }

};