import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native-gesture-handler';
import {ProfilePreview} from '..';
import {ProfilePreviewType, ScreenType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import TaggRadioButton from './TaggRadioButton';

interface TaggUserSelectionCellProps {
  item: ProfilePreviewType;
  selectedUsers: ProfilePreviewType[];
  setSelectedUsers: Function;
}
const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
  item,
  selectedUsers,
  setSelectedUsers,
}) => {
  const [pressed, setPressed] = useState<boolean>(false);

  /*
   * To update state of radio button on initial render and subsequent re-renders
   */
  useEffect(() => {
    const updatePressed = () => {
      const userSelected = selectedUsers.findIndex(
        (selectedUser) => item.id === selectedUser.id,
      );
      setPressed(userSelected !== -1);
    };
    updatePressed();
  });

  /*
   * Handles on press on radio button
   * Adds/removes user from selected list of users
   */
  const handlePress = () => {
    // Add to selected list of users
    if (pressed === false) {
      setSelectedUsers([...selectedUsers, item]);
    }
    // Remove item from selected list of users
    else {
      const filteredSelection = selectedUsers.filter(
        (user) => user.id !== item.id,
      );
      setSelectedUsers(filteredSelection);
    }
  };
  return (
    <TouchableWithoutFeedback onPress={handlePress} style={styles.container}>
      <View style={{width: SCREEN_WIDTH * 0.8}}>
        <ProfilePreview
          profilePreview={item}
          previewType={'Search'}
          screenType={ScreenType.Profile}
        />
      </View>
      <TaggRadioButton pressed={pressed} onPress={handlePress} />
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    marginHorizontal: '3%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default TaggUserSelectionCell;