import {useFocusEffect, useNavigation} from '@react-navigation/native';
import React, {
  memo,
  Fragment,
  useCallback,
  useEffect,
  useState,
  useMemo,
} from 'react';
import {
  FlatList,
  ListRenderItemInfo,
  RefreshControl,
  StatusBar,
  StyleSheet,
  Text,
  View,
  ViewToken,
} from 'react-native';
import {Image} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {TabsGradient, TaggsBar} from '../../components';
import {MutualFriends} from '../../components/suggestedPeople';
import {SP_PAGE_SIZE} from '../../constants';
import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
import {getSuggestedPeople} from '../../services/SuggestedPeopleService';
import {cancelFriendRequest, resetScreenType} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import RequestedButton from '../../assets/ionicons/requested-button.svg';
import {
  FriendshipStatusType,
  FriendshipType,
  ProfilePreviewType,
  ScreenType,
  SuggestedPeopleDataType,
} from '../../types';
import {
  fetchUserX,
  getUserAsProfilePreviewType,
  handleAddFriend,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import {userXInStore} from './../../utils/';

/**
 * Bare bones for suggested people consisting of:
 * * Image, title, name, username, add friend button [w/o functionality]
 */

const SPBody: React.FC<SuggestedPeopleDataType> = ({
  item: {
    user,
    mutual_friends,
    badges,
    social_links,
    suggested_people_url,
    friendship,
  },
  index,
  onCancelRequest,
  onAddFriend,
  loggedInUserId,
}) => {
  const firstItem = index === 0;
  const screenType = ScreenType.SuggestedPeople;

  const displayButton = () => {
    // setDisplayedUser(suggested);

    switch (friendship.status) {
      case 'friends':
        return <Fragment />;
      case 'requested':
        if (friendship.requester_id === loggedInUserId) {
          return (
            <TouchableOpacity
              style={styles.requestedButton}
              onPress={() => onCancelRequest(user)}
              disabled={false}>
              <RequestedButton
                width={SCREEN_WIDTH * 0.3}
                height={SCREEN_HEIGHT * 0.085}
              />
            </TouchableOpacity>
          );
        } else {
          return (
            <TouchableOpacity style={styles.addButton} disabled={true}>
              <Text style={styles.addButtonTitle}>{'Pending'}</Text>
            </TouchableOpacity>
          );
        }
      case 'no_record':
        return (
          <TouchableOpacity
            style={styles.addButton}
            onPress={() => onAddFriend(user)}
            disabled={false}>
            <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
          </TouchableOpacity>
        );
      default:
        return <Fragment />;
    }
  };

  const backgroundImage = useMemo(
    () => (
      <Image
        source={{
          uri: suggested_people_url,
        }}
        style={styles.image}
      />
    ),
    [suggested_people_url],
  );
  const navigation = useNavigation();

  return (
    <View>
      {backgroundImage}
      <View style={styles.mainContainer}>
        <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
        <View style={styles.body}>
          <View style={styles.marginManager}>
            <View style={styles.addUserContainer}>
              <TouchableOpacity
                onPress={() => {
                  navigation.push('Profile', {
                    userXId: user.id,
                    screenType,
                  });
                }}
                style={styles.nameInfoContainer}>
                <Text style={styles.firstName}>{user.first_name}</Text>
                <Text style={styles.username}>@{user.username}</Text>
              </TouchableOpacity>
              {user.id !== loggedInUserId && displayButton()}
            </View>
          </View>
          <TaggsBar
            y={Animated.useValue(0)}
            userXId={user.id === loggedInUserId ? undefined : user.id}
            profileBodyHeight={0}
            screenType={screenType}
            whiteRing={true}
            linkedSocials={social_links}
          />
          <View style={styles.marginManager}>
            <MutualFriends user={user} friends={mutual_friends} />
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flexDirection: 'column',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    paddingVertical: '15%',
    paddingBottom: '20%',
    justifyContent: 'space-between',
    alignSelf: 'center',
  },
  marginManager: {marginHorizontal: '5%'},
  image: {
    position: 'absolute',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    zIndex: 0,
  },
  title: {
    zIndex: 1,
    paddingTop: '3%',
    alignSelf: 'center',
    fontSize: normalize(22),
    lineHeight: normalize(26),
    fontWeight: '800',
    letterSpacing: normalize(3),
    color: '#FFFEFE',
    textShadowColor: 'rgba(0, 0, 0, 0.4)',
    textShadowOffset: {width: normalize(2), height: normalize(2)},
    textShadowRadius: normalize(2),
  },
  firstName: {
    color: '#fff',
    fontWeight: '800',
    fontSize: normalize(24),
    lineHeight: normalize(29),
    textShadowColor: 'rgba(0, 0, 0, 0.3)',
    textShadowOffset: {width: normalize(2), height: normalize(2)},
    textShadowRadius: normalize(2),
    letterSpacing: normalize(2.5),
    alignSelf: 'baseline',
  },
  username: {
    color: '#fff',
    fontWeight: '600',
    fontSize: normalize(15),
    lineHeight: normalize(18),
    textShadowColor: 'rgba(0, 0, 0, 0.3)',
    textShadowOffset: {width: normalize(2), height: normalize(2)},
    textShadowRadius: normalize(2),
    letterSpacing: normalize(2),
  },
  nameInfoContainer: {},
  addButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.3,
    height: SCREEN_WIDTH * 0.085,
    padding: 0,
    borderWidth: 2,
    borderColor: '#fff',
    borderRadius: 1,
    marginLeft: '1%',
    marginTop: '4%',
    shadowColor: 'rgb(0, 0, 0)',
    shadowRadius: 2,
    shadowOffset: {width: 2, height: 2},
    shadowOpacity: 0.5,
  },
  addButtonTitle: {
    color: 'white',
    padding: 0,
    fontSize: normalize(15),
    lineHeight: normalize(18),
    fontWeight: 'bold',
    textAlign: 'center',
    letterSpacing: normalize(1),
  },
  addUserContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: '5%',
  },
  requestedButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.3,
    height: SCREEN_WIDTH * 0.085,
    padding: 0,
    borderWidth: 2,
    borderColor: 'transparent',
    borderRadius: 1,
    marginLeft: '1%',
    marginTop: '4%',
    shadowColor: 'rgb(0, 0, 0)',
    shadowRadius: 2,
    shadowOffset: {width: 2, height: 2},
    shadowOpacity: 0.5,
  },
  requestedButtonTitle: {
    backgroundColor: 'transparent',
    fontSize: normalize(15),
    lineHeight: normalize(18),
    fontWeight: 'bold',
    textAlign: 'center',
    letterSpacing: normalize(1),
  },
  body: {},

  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.4,
    aspectRatio: 154 / 33,
    borderWidth: 2,
    borderColor: '#fff',
    borderRadius: 3,
    marginRight: '2%',
    marginLeft: '1%',
  },
  transparentBG: {
    backgroundColor: 'transparent',
  },
  lightBlueBG: {
    backgroundColor: '#fff',
  },
  label: {
    fontSize: normalize(15),
    fontWeight: '700',
    letterSpacing: 1,
  },
  blueLabel: {
    color: '#fff',
  },
  whiteLabel: {
    color: 'white',
  },
});

export default SPBody;