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

export type InviteContactType = {
  firstName: string;
  lastName: string;
  phoneNumber: string;
};

export type SearchResultType = {
  nonUsersFromContacts: InviteContactType[];
  pendingUsers: InviteContactType[];
};

const InviteFriendsScreen: React.FC = () => {
  const navigation = useNavigation();
  const [usersFromContacts, setUsersFromContacts] = useState<
    ProfilePreviewType[]
  >([]);
  const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
  const [pendingUsers] = useState<[]>([]);
  const [results, setResults] = useState<SearchResultType>({
    nonUsersFromContacts: nonUsersFromContacts,
    pendingUsers: pendingUsers,
  });
  const [query, setQuery] = useState('');
  const [invitesLeft, setInvitesLeft] = useState(0);

  useEffect(() => {
    // Get number of invites from the backend and set the state
    const getInitialInvitesCount = async () => {
      const intialInvites = await getRemainingInviteCount();
      setInvitesLeft(intialInvites);
    };
    getInitialInvitesCount();
  }, []);

  useEffect(
    () =>
      navigation.setOptions({
        ...headerBarOptions('black', `You have ${invitesLeft} Invites`),
      }),
    [invitesLeft],
  );

  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({
            nonUsersFromContacts: response.invite_from_contacts,
            pendingUsers: response.pending_users,
          });
        } 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: InviteContactType) =>
            (item.firstName + ' ' + item.lastName)
              .toLowerCase()
              .startsWith(query) ||
            item.lastName.toLowerCase().startsWith(query),
        );
        const sanitizedResult = {
          usersFromContacts: searchResultsUsers,
          nonUsersFromContacts: searchResultsNonUsers,
        };
        setResults(sanitizedResult);
      } else {
        setResults({
          nonUsersFromContacts: nonUsersFromContacts,
          pendingUsers: pendingUsers,
        });
      }
    };
    search();
  }, [query]);

  const PendingList = useMemo(
    () => (
      <FlatList
        contentContainerStyle={styles.nonUsersFlatListContainer}
        showsVerticalScrollIndicator={false}
        scrollEnabled={false}
        data={results.pendingUsers}
        keyExtractor={(item) => item.phoneNumber}
        renderItem={({item}) => (
          <InviteFriendTile
            item={item}
            remind={true}
            invitesLeft={invitesLeft}
            setInvitesLeft={setInvitesLeft}
            results={results}
            setResults={setResults}
          />
        )}
      />
    ),
    [results.pendingUsers],
  );

  const InviteList = useMemo(
    () => (
      <FlatList
        contentContainerStyle={styles.nonUsersFlatListContainer}
        showsVerticalScrollIndicator={false}
        scrollEnabled={false}
        data={results.nonUsersFromContacts}
        keyExtractor={(item) => item.phoneNumber}
        renderItem={({item}) => (
          <InviteFriendTile
            item={item}
            remind={false}
            invitesLeft={invitesLeft}
            setInvitesLeft={setInvitesLeft}
            results={results}
            setResults={setResults}
          />
        )}
      />
    ),
    [results.nonUsersFromContacts],
  );

  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,
                {
                  height:
                    72 *
                    (results.pendingUsers ? results.pendingUsers.length : 1),
                },
              ]}>
              <Text style={styles.subheaderText}>Pending Users</Text>
              {PendingList}
            </View>
            <View style={styles.subheader}>
              <Text style={styles.subheaderText}>Invite your friends!</Text>
              {InviteList}
            </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,
  },
  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',
  },
});

export default InviteFriendsScreen;