import {useNavigation} from '@react-navigation/native';
import React, {Dispatch, SetStateAction} from 'react';
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {ProfilePreview} from '..';
import {ProfilePreviewType, ScreenType} from '../../types';
import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';

interface TagFriendsFooterProps {
  taggedUsers: ProfilePreviewType[];
  setTaggedUsers: Dispatch<SetStateAction<ProfilePreviewType[]>>;
}
const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
  taggedUsers,
  setTaggedUsers,
}) => {
  const navigation = useNavigation();

  const handleRemoveTag = (user: ProfilePreviewType) => {
    const filteredSelection = taggedUsers.filter((item) => user.id !== item.id);
    setTaggedUsers(filteredSelection);
  };

  const TaggMoreButton = () => (
    <TouchableOpacity
      onPress={() =>
        navigation.navigate('TagSelectionScreen', {
          selectedUsers: taggedUsers,
        })
      }
      style={styles.tagMoreContainer}>
      <Image
        source={require('../../assets/icons/tagging/white-plus-icon.png')}
        style={styles.tagMoreIcon}
      />
      <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
    </TouchableOpacity>
  );

  const TaggedUser = (user: ProfilePreviewType) => (
    <View style={styles.taggedUserContainer} key={user.id}>
      <TouchableOpacity
        style={styles.closeIconContainer}
        onPress={() => handleRemoveTag(user)}>
        <Image
          source={require('../../assets/icons/tagging/x-icon.png')}
          style={styles.closeIcon}
        />
      </TouchableOpacity>
      <ProfilePreview
        profilePreview={user}
        previewType={'Tag Selection'}
        screenType={ScreenType.Profile}
      />
    </View>
  );

  /*
   * Title/Button depending on the number of users inside taggedUsers list
   * If taggUsers is empty, title acts as a button
   * Else, gets disabled and TaggMore button appears
   */
  const TagFriendsTitle = () => (
    <TouchableOpacity
      style={styles.tagFriendsTitleContainer}
      disabled={taggedUsers.length !== 0}
      onPress={() =>
        navigation.navigate('TagSelectionScreen', {
          selectedUsers: taggedUsers,
        })
      }>
      <Image
        source={require('../../assets/icons/tagging/tag-icon.png')}
        style={styles.tagIcon}
      />
      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
    </TouchableOpacity>
  );

  return (
    <>
      <TagFriendsTitle />
      <View style={styles.tagFriendsContainer}>
        <ScrollView horizontal>
          {taggedUsers.map((user) => (
            <TaggedUser {...user} />
          ))}
          {taggedUsers.length !== 0 && <TaggMoreButton />}
        </ScrollView>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  tagIcon: {width: 20, height: 20, marginRight: '3%'},
  tagFriendsTitle: {
    color: 'white',
    fontSize: normalize(12),
    lineHeight: normalize(16.71),
    letterSpacing: normalize(0.3),
    fontWeight: '600',
  },
  tagFriendsContainer: {
    height: SCREEN_HEIGHT * 0.1,
    marginTop: 2,
    marginBottom: 5,
  },
  tagMoreLabel: {
    fontWeight: '500',
    fontSize: normalize(9),
    lineHeight: normalize(10),
    letterSpacing: normalize(0.2),
    color: 'white',
    textAlign: 'center',
  },
  closeIconContainer: {
    width: 20,
    height: 20,
    right: -20,
    zIndex: 1,
  },
  tagMoreContainer: {
    width: 60,
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: -12,
  },
  tagMoreIcon: {
    width: 38,
    height: 38,
    marginTop: 13,
    marginBottom: '10%',
  },
  taggedUserContainer: {
    marginTop: -12,
  },
  closeIcon: {
    width: 20,
    height: 20,
    left: 15,
    top: 10,
  },
  tagFriendsTitleContainer: {
    flexDirection: 'row',
  },
});

export default TagFriendsFooter;