import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {checkPermission} from 'react-native-contacts';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useDispatch, useStore} from 'react-redux';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {usersFromContactsService} from '../../services';
import {NO_USER} from '../../store/initialStates';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType, ScreenType} from '../../types';
import {
  extractContacts,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import {handleAddFriend, handleUnfriend} from '../../utils/friends';
import {ProfilePreview} from '../profile';

interface FriendsProps {
  result: Array<ProfilePreviewType>;
  screenType: ScreenType;
  userId: string;
}

const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
  const state: RootState = useStore().getState();
  const dispatch = useDispatch();
  const {user: loggedInUser = NO_USER} = state;
  const navigation = useNavigation();
  const [usersFromContacts, setUsersFromContacts] = useState<
    ProfilePreviewType[]
  >([]);

  useEffect(() => {
    const handleFindFriends = () => {
      extractContacts().then(async (contacts) => {
        const permission = await checkPermission();
        if (permission === 'authorized') {
          let response = await usersFromContactsService(contacts);
          await setUsersFromContacts(response.existing_tagg_users);
        } else {
          console.log('Authorize access to contacts');
        }
      });
    };
    handleFindFriends();
  }, []);

  const UsersFromContacts = () => (
    <>
      {usersFromContacts?.splice(0, 2).map((profilePreview) => (
        <View key={profilePreview.id} style={styles.container}>
          <View style={styles.friend}>
            <ProfilePreview
              {...{profilePreview}}
              previewType={'Friend'}
              screenType={screenType}
            />
          </View>
          <TouchableOpacity
            style={styles.addFriendButton}
            onPress={() => {
              handleAddFriend(screenType, profilePreview, dispatch, state).then(
                (success) => {
                  if (success) {
                    let users = usersFromContacts;
                    setUsersFromContacts(
                      users.filter(
                        (user) => user.username !== profilePreview.username,
                      ),
                    );
                  }
                },
              );
            }}>
            <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
          </TouchableOpacity>
        </View>
      ))}
    </>
  );

  return (
    <>
      {loggedInUser.userId === userId && (
        <View style={styles.subheader}>
          <View style={styles.addFriendHeaderContainer}>
            <Text style={[styles.subheaderText]}>Contacts on tagg</Text>
          </View>
          <UsersFromContacts />
        </View>
      )}
      <Text style={[styles.subheaderText, styles.friendsSubheaderText]}>
        Friends
      </Text>
      <ScrollView
        keyboardShouldPersistTaps={'always'}
        style={styles.scrollView}
        contentContainerStyle={styles.scrollViewContent}
        showsVerticalScrollIndicator={false}>
        {result.map((profilePreview) => (
          <View key={profilePreview.id} style={styles.container}>
            <View style={styles.friend}>
              <ProfilePreview
                {...{profilePreview}}
                previewType={'Friend'}
                screenType={screenType}
              />
            </View>
            {loggedInUser.userId === userId && (
              <TouchableOpacity
                style={styles.unfriendButton}
                onPress={() =>
                  handleUnfriend(screenType, profilePreview, dispatch, state)
                }>
                <Text style={styles.unfriendButtonTitle}>Unfriend</Text>
              </TouchableOpacity>
            )}
          </View>
        ))}
      </ScrollView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flexDirection: 'column',
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.85,
  },
  firstScrollView: {},
  scrollViewContent: {
    alignSelf: 'center',
    paddingBottom: SCREEN_HEIGHT / 7,
    width: SCREEN_WIDTH * 0.85,
    marginTop: '1%',
  },
  addFriendHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: '3%',
    marginTop: '2%',
  },
  header: {flexDirection: 'row'},
  subheader: {
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.85,
    marginVertical: '1%',
  },
  subheaderText: {
    color: '#828282',
    fontSize: normalize(12),
    fontWeight: '600',
    lineHeight: normalize(14.32),
  },
  findFriendsButton: {flexDirection: 'row'},
  friendsSubheaderText: {
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.85,
    marginVertical: '1%',
    marginBottom: '2%',
  },
  findFriendsSubheaderText: {
    marginLeft: '5%',
    color: '#08E2E2',
    fontSize: normalize(12),
    fontWeight: '600',
    lineHeight: normalize(14.32),
  },
  container: {
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    height: normalize(42),
    alignItems: 'center',
    marginBottom: '5%',
  },
  friend: {
    alignSelf: 'center',
    height: '100%',
  },
  addFriendButton: {
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '55%',
    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%',
  },
  unfriendButton: {
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    width: 82,
    height: '55%',
    borderColor: TAGG_LIGHT_BLUE,
    borderWidth: 2,
    borderRadius: 2,
    padding: 0,
  },
  unfriendButtonTitle: {
    color: TAGG_LIGHT_BLUE,
    padding: 0,
    fontSize: normalize(11),
    fontWeight: '700',
    lineHeight: normalize(13.13),
    letterSpacing: normalize(0.6),
    paddingHorizontal: '3.8%',
  },
});

export default Friends;