import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
  StyleSheet,
  TextInput,
  FlatList,
  Keyboard,
  Linking,
  StatusBar,
  TouchableWithoutFeedback,
  ScrollView,
} from 'react-native';
import {useDispatch, useStore} from 'react-redux';
import {ProfilePreviewType} from '../../types';
import {
  extractContacts,
  handleAddFriend,
  HeaderHeight,
  isIPhoneX,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  StatusBarHeight,
} from '../../utils';
import {checkPermission} from 'react-native-contacts';
import {usersFromContactsService} from '../../services/UserFriendsService';
import {ProfilePreview, TabsGradient} from '../../components';
import Animated from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/Feather';
import {InviteFriendTile} from '../../components/friends';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {MainStackParams} from '../../routes';
import {RouteProp} from '@react-navigation/native';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);

type InviteFriendsScreenRouteProp = RouteProp<
  MainStackParams,
  'InviteFriendsScreen'
>;

interface InviteFriendsScreenProps {
  route: InviteFriendsScreenRouteProp;
}

const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
  const {screenType} = route.params;
  const dispatch = useDispatch();
  const state = useStore().getState();
  const [usersFromContacts, setUsersFromContacts] = useState<
    ProfilePreviewType[]
  >([]);
  const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
  type SearchResultType = {
    usersFromContacts: ProfilePreviewType[];
    nonUsersFromContacts: [];
  };
  const [results, setResults] = useState<SearchResultType>({
    usersFromContacts: usersFromContacts,
    nonUsersFromContacts: nonUsersFromContacts,
  });
  const [query, setQuery] = useState('');

  useEffect(() => {
    const handleFindFriends = () => {
      extractContacts().then(async (retrievedContacts) => {
        const permission = await checkPermission();
        if (permission === 'authorized') {
          let response = await usersFromContactsService(retrievedContacts);
          await setUsersFromContacts(response.existing_tagg_users);
          await setNonUsersFromContacts(response.invite_from_contacts);
          setResults({
            usersFromContacts: response.existing_tagg_users,
            nonUsersFromContacts: response.invite_from_contacts,
          });
        } else {
          Linking.openSettings();
        }
      });
    };
    handleFindFriends();
  }, []);

  /*
   * Main handler for changes in query.
   */
  useEffect(() => {
    const search = async () => {
      if (query.length > 0) {
        const searchResultsUsers = usersFromContacts.filter(
          (item: ProfilePreviewType) =>
            (item.first_name + ' ' + item.last_name)
              .toLowerCase()
              .startsWith(query) ||
            item.username.toLowerCase().startsWith(query) ||
            item.last_name.toLowerCase().startsWith(query),
        );
        const searchResultsNonUsers = nonUsersFromContacts.filter(
          (item) =>
            (item.firstName + ' ' + item.lastName)
              .toLowerCase()
              .startsWith(query) ||
            item.lastName.toLowerCase().startsWith(query),
        );
        const sanitizedResult = {
          usersFromContacts: searchResultsUsers,
          nonUsersFromContacts: searchResultsNonUsers,
        };
        setResults(sanitizedResult);
      } else {
        setResults({
          usersFromContacts: usersFromContacts,
          nonUsersFromContacts: nonUsersFromContacts,
        });
      }
    };
    search();
  }, [query]);

  const UsersFromContacts = () => (
    <>
      <FlatList
        showsVerticalScrollIndicator={false}
        scrollEnabled={false}
        data={results.usersFromContacts}
        keyExtractor={(item) => item.username}
        renderItem={({item}) => (
          <View key={item.id} style={styles.ppContainer}>
            <View style={styles.friend}>
              <ProfilePreview
                {...{profilePreview: item}}
                previewType={'Friend'}
                screenType={screenType}
              />
            </View>
            <TouchableOpacity
              style={styles.addFriendButton}
              onPress={() => {
                handleAddFriend(screenType, item, dispatch, state).then(
                  (success) => {
                    if (success) {
                      let users = usersFromContacts;
                      const filteredUsers = users.filter(
                        (user) => user.username !== item.username,
                      );
                      setResults({
                        ...results,
                        usersFromContacts: filteredUsers,
                      });
                    }
                  },
                );
              }}>
              <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </>
  );

  return (
    <View style={styles.mainContainer}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <SafeAreaView style={{marginTop: HeaderHeight + StatusBarHeight}}>
          <StatusBar barStyle="dark-content" />
          <ScrollView
            style={styles.body}
            contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
            <View style={styles.headerContainer}>
              <Text style={styles.headerText}>
                Sharing is caring, invite friends, and create moments together!
              </Text>
            </View>
            <View style={styles.container}>
              <Animated.View style={styles.inputContainer}>
                <AnimatedIcon
                  name="search"
                  color={'#7E7E7E'}
                  size={16}
                  style={styles.searchIcon}
                />
                <TextInput
                  style={[styles.input]}
                  placeholderTextColor={'#828282'}
                  clearButtonMode="while-editing"
                  autoCapitalize="none"
                  autoCorrect={false}
                  onChangeText={(text) => {
                    setQuery(text.toLowerCase());
                  }}
                  onBlur={() => {
                    Keyboard.dismiss();
                  }}
                  onEndEditing={() => {
                    Keyboard.dismiss();
                  }}
                  value={query}
                  placeholder={'Search'}
                />
              </Animated.View>
            </View>
            <View style={styles.subheader}>
              <Text style={styles.subheaderText}>Contacts on tagg</Text>
              <UsersFromContacts />
            </View>
            <View style={styles.subheader}>
              <Text style={styles.subheaderText}>Invite your friends!</Text>
              <FlatList
                contentContainerStyle={styles.nonUsersFlatListContainer}
                showsVerticalScrollIndicator={false}
                scrollEnabled={false}
                data={results.nonUsersFromContacts}
                keyExtractor={(item) => item.phoneNumber}
                renderItem={({item}) => <InviteFriendTile item={item} />}
              />
            </View>
          </ScrollView>
        </SafeAreaView>
      </TouchableWithoutFeedback>
      <TabsGradient />
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {backgroundColor: 'white', height: SCREEN_HEIGHT},
  body: {
    paddingTop: 10,
    height: SCREEN_HEIGHT,
    backgroundColor: '#fff',
  },
  headerContainer: {
    width: SCREEN_WIDTH * 0.85,
    height: isIPhoneX() ? SCREEN_HEIGHT * 0.06 : SCREEN_HEIGHT * 0.08,
    alignSelf: 'center',
  },
  nonUsersFlatListContainer: {paddingBottom: 130},
  subheader: {
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.85,
    marginBottom: '5%',
  },
  subheaderText: {
    color: '#828282',
    fontSize: normalize(12),
    fontWeight: '600',
    lineHeight: normalize(14.32),
    marginBottom: '5%',
  },
  headerText: {
    textAlign: 'center',
    color: '#828282',
    fontSize: normalize(12),
    fontWeight: '600',
    lineHeight: normalize(14.32),
    marginBottom: '5%',
  },
  container: {
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    height: normalize(42),
    alignItems: 'center',
    marginBottom: '3%',
    marginHorizontal: 10,
  },
  ppContainer: {
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    height: normalize(42),
    alignItems: 'center',
    marginBottom: '5%',
    marginHorizontal: 10,
  },
  inputContainer: {
    flexGrow: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    marginHorizontal: '3%',
    borderRadius: 20,
    backgroundColor: '#F0F0F0',
    height: 34,
  },
  searchIcon: {
    marginRight: '5%',
  },
  input: {
    flex: 1,
    fontSize: normalize(16),
    color: '#000',
    letterSpacing: normalize(0.5),
  },
  cancelButton: {
    height: '100%',
    position: 'absolute',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  cancelText: {
    color: '#818181',
    fontWeight: '500',
  },
  friend: {
    alignSelf: 'center',
    height: '100%',
  },
  addFriendButton: {
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    width: 82,
    height: 25,
    borderColor: TAGG_LIGHT_BLUE,
    borderWidth: 2,
    borderRadius: 2,
    padding: 0,
    backgroundColor: TAGG_LIGHT_BLUE,
  },
  addFriendButtonTitle: {
    color: 'white',
    padding: 0,
    fontSize: normalize(11),
    fontWeight: '700',
    lineHeight: normalize(13.13),
    letterSpacing: normalize(0.6),
    paddingHorizontal: '3.8%',
  },
});

export default InviteFriendsScreen;