import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import {
    addParticipants
} from '../../store/bubbles/bubblesSlice';
import { ParticipantsListView } from '../common/ParticipantsListView';
import { Strings } from '../../resources/localization/Strings';
import { Header } from '../common/Header';
import { AddParticipantsNavigationProp, AddParticipantsRouteProp } from '../../RootStackParamList';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { IPeer } from '../../store/peer/types';


interface IProps {
    navigation: AddParticipantsNavigationProp;
    route: AddParticipantsRouteProp
}

export const AddParticipant: React.FunctionComponent<IProps> = ({ route, navigation }) => {
    const bubbleId = route.params.bubbleId;
    const dispatch = useAppDispatch();
    const bubblesMembers = useAppSelector((state) => state.bubbles.bubblesMembers);
    const contacts = useAppSelector((state) => state.contacts.contacts);
    const [selectedContacts, setSelectedContacts] = useState<string[]>([]);
    const [contactsToAdd, setContactsToAdd] = useState<IPeer[]>([]);
    const updateContacts = (selectedContactsID: string[]) => {
        setSelectedContacts(selectedContactsID);
    };

    useEffect(() => {
        const filterResult = contacts.filter((item: IPeer) => {
            return !bubblesMembers.find((element: IPeer) => {
              return element.jId === item.jId;
            });
          });
        setContactsToAdd(filterResult );
    }, [bubblesMembers, contacts]);

    const close = () => {
        navigation.pop()
    }
    const add = () => {
        if (selectedContacts.length > 0) {
            dispatch(addParticipants({bubbleId, contactsJid: selectedContacts}))
            close();
        }
    }
    const renderLeftHeader = () => {
        return (
            <TouchableOpacity onPress={close}>
                <Text style={styles.fontStyle}>{Strings.cancel}</Text>
            </TouchableOpacity>
        )
    }
    const renderCenterHeader = () => {
        return <Text style={styles.fontStyle}>{Strings.Attendees} </Text>;
    }
    const renderRightHeader = () => {
        return (
            <TouchableOpacity onPress={add}>
                <Text style={selectedContacts.length > 0 ? styles.headerComponentStyle : styles.inActiveIcon}>{Strings.Add}</Text>
            </TouchableOpacity>
        )
    }
    return (
        <View style={styles.container}>
            <Header containerStyle={styles.headerBgColor} leftComponent={renderLeftHeader} centerComponent={renderCenterHeader} rightComponent={renderRightHeader} />
            <ParticipantsListView participants={contactsToAdd} onParticipantsUpdated={updateContacts} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#ffffff', height: 'auto', },
    Thumbnail: { width: 30, height: 30, },
    headerBgColor: { backgroundColor: '#0086CF', },
    editBubbleView: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    inActiveIcon: {
        color: '#a9c0ef',
        fontSize: 17
    },
    headerComponentStyle: {
        color: 'white',
        fontSize: 17,
        alignSelf: 'center',
    },
    fontStyle:{
        color: 'white',
        fontSize: 16,
    }
});