import React, {useState} from 'react';
import {StyleSheet, View} from 'react-native';
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);

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

export default TaggUserSelectionCell;

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