import React, { FunctionComponent, useEffect, useState } from 'react';
import { eventEmitter, EventType } from '../../services/EventEmitter';
import { bubblesService } from '../../services/bubbles';
import { Text, Badge } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

export const BubbleEventsTabIcon: FunctionComponent = () => {
    const [bubbleInvitationCounter, setBubbleInvitationCounter] = useState<number>(0);

    useEffect(() => {
        bubblesService.getInvitedBubbles();

        const bubblePendingInvitationsCounter = eventEmitter.addListener(
            EventType.BubblePendingInvitationsCounter,
            (counter: number) => setBubbleInvitationCounter(counter)
        );

        // Clean up the event listener on component unmount
        return () => {
            bubblePendingInvitationsCounter.remove();
        };
    }, []);

    return (
        bubbleInvitationCounter > 0 ? (
            <View style={styles.badgeContainer}>
              <Badge size={16} visible={true} style={styles.badge} />
              <Text style={styles.badgeText}>{bubbleInvitationCounter}</Text>
            </View>
        ) : null
    );
};
const styles = StyleSheet.create({
    badgeContainer: {
        position: 'relative',
        marginLeft: 20,
        marginTop: -8,
        alignItems: 'center',
        justifyContent: 'center',
    },
    badge: {
        position: 'absolute',
        backgroundColor: '#B71C1C', 
   },
    badgeText: {
        color: '#FFFFFF',
        fontSize: 10,
        fontWeight: 'bold',
        textAlign: 'center',
    },
});