import React, {useEffect, useState, useContext} from 'react';
import {ProfilePreviewType} from '../../types';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ViewProps,
  TouchableOpacity,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import RNFetchBlob from 'rn-fetch-blob';
import AsyncStorage from '@react-native-community/async-storage';
import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
import {UserType} from '../../types';
import {ProfileContext} from '../../routes/viewProfile';
const NO_USER: UserType = {
  userId: '',
  username: '',
};

interface SearchResultProps extends ViewProps {
  profilePreview: ProfilePreviewType;
}
const SearchResult: React.FC<SearchResultProps> = ({
  profilePreview: {username, first_name, last_name, id},
  style,
}) => {
  const navigation = useNavigation();
  const {loadProfile, updateMoments} = useContext(ProfileContext);
  const [avatarURI, setAvatarURI] = useState<string | null>(null);
  const [user, setUser] = useState<UserType>(NO_USER);
  useEffect(() => {
    let mounted = true;
    const loadAvatar = async () => {
      try {
        const token = await AsyncStorage.getItem('token');
        if (!token) {
          setUser(NO_USER);
          return;
        }
        const response = await RNFetchBlob.config({
          fileCache: true,
          appendExt: 'jpg',
        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${id}/`, {
          Authorization: 'Token ' + token,
        });
        const status = response.info().status;
        if (status === 200) {
          if (mounted) {
            setAvatarURI(response.path());
          }
          return;
        }
        if (mounted) {
          setAvatarURI('');
        }
      } catch (error) {
        console.log(error);
      }
    };
    loadAvatar();
    return () => {
      mounted = false;
    };
  }, [id]);

  /**
   * Adds a searched user to the recently searched cache if they're tapped on.
   * Cache maintains 10 recently searched users, popping off the oldest one if
   * needed to make space.
   */
  const addToRecentlyStoredAndNavigateToProfile = async () => {
    let user: ProfilePreviewType = {
      id,
      username,
      first_name,
      last_name,
    };
    try {
      const jsonValue = await AsyncStorage.getItem('@recently_searched_users');
      let recentlySearchedList =
        jsonValue != null ? JSON.parse(jsonValue) : null;
      if (recentlySearchedList) {
        if (recentlySearchedList.length > 0) {
          if (
            recentlySearchedList.some(
              (saved_user: ProfilePreviewType) => saved_user.id === id,
            )
          ) {
            console.log('User already in recently searched.');
          } else {
            if (recentlySearchedList.length >= 10) {
              recentlySearchedList.pop();
            }
            recentlySearchedList.unshift(user);
          }
        }
      } else {
        recentlySearchedList = [user];
      }

      //Load user profile and set new moments to true, navigate to Profile
      //Load user profile makes sure that we actually load profile of the user the logged in user want to view
      //Set new moments to true makes sure that we download the moment for the user being viewed again.
      //Not sure if we should make this call before caching the search results ??
      loadProfile(user.id, user.username);
      updateMoments(true);
      navigation.navigate('Profile', {
        isProfileView: true,
      });

      try {
        let recentlySearchedListString = JSON.stringify(recentlySearchedList);
        await AsyncStorage.setItem(
          '@recently_searched_users',
          recentlySearchedListString,
        );
      } catch (e) {
        console.log(e);
      }
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <TouchableOpacity
      onPress={addToRecentlyStoredAndNavigateToProfile}
      style={[styles.container, style]}>
      <Image
        style={styles.avatar}
        source={
          avatarURI
            ? {uri: avatarURI}
            : require('../../assets/images/avatar-placeholder.png')
        }
      />
      <View style={styles.nameContainer}>
        <Text style={styles.username}>@{username}</Text>
        <Text style={styles.name}>{first_name.concat(' ', last_name)}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    height: 60,
    width: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  nameContainer: {
    justifyContent: 'space-evenly',
    alignSelf: 'stretch',
  },
  username: {
    fontSize: 18,
    fontWeight: '500',
  },
  name: {
    fontSize: 16,
    color: '#333',
  },
});

export default SearchResult;