import { getPendingContactInvitation } from '../../store/invitations/invitationsSlice';
import React, { FunctionComponent, useEffect, useState } from 'react';
import { eventEmitter, EventType } from '../../services/EventEmitter';
import { Logger } from '../../utils/Log';
import { useAppDispatch } from '../../store/hooks';
import { StyleSheet, Text, View } from 'react-native';

export const InvitationTabIcon: FunctionComponent = () => {
    const logger = new Logger('InvitationTabIcon');
    const dispatch = useAppDispatch();
    const [contactsInvitationCounter, setContactsInvitationCounter] = useState<number>(0);
    useEffect(() => {
        dispatch(getPendingContactInvitation());
        eventEmitter.addListener(
            EventType.TotalNbOfPendingInvitations,
            (counter: number) => {
                logger.info(`TotalNbOfPendingInvitations: ${counter}`);
                setContactsInvitationCounter(counter);
            }
        );
    }, []);
    if (contactsInvitationCounter > 0) {
        return (
            <View style={styles.badge}>
                <Text style={styles.badgeText}>{contactsInvitationCounter}</Text>
            </View>
        );
    } else return null;

};

const styles = StyleSheet.create({
    badge: {
      width: 16,
      height: 16,
      borderRadius: 8, 
      backgroundColor: '#B71C1C', 
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 2,
      marginLeft: 20,
      marginTop: -8,
    },
    badgeText: {
      color: 'white',
      fontSize: 10,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });