import React, {useCallback} from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {Image} from 'react-native-animatable';
import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {TabsGradient, TaggsBar} from '../../components';
import {SafeAreaView} from 'react-native-safe-area-context';
import {normalize} from '../../utils';
import Animated from 'react-native-reanimated';
import {ScreenType} from '../../types';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootReducer';
import {useFocusEffect, useNavigation} from '@react-navigation/native';

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

const SuggestedPeopleScreen: React.FC = () => {
  // Can be removed once firstname, username props are received
  const firstName = 'Sarah';

  // Adviced to maintain username as a variable here to append @ symbol for maintainability
  const username = '@' + 'sarahmiller';
  const navigation = useNavigation();
  const screenType = ScreenType.SuggestedPeople;
  const {
    profile: {sp_swipe_tutorial},
  } = useSelector((state: RootState) => state.user);

  useFocusEffect(
    useCallback(() => {
      const navigateToAnimatedTutorial = () => {
        /* In user's store, check if profile.sp_swipe_tutorial === 0
         * If, true show tutorial.
         */
        if (sp_swipe_tutorial === 0) {
          navigation.navigate('AnimatedTutorial');
        }
      };
      navigateToAnimatedTutorial();
    }, [sp_swipe_tutorial, navigation]),
  );

  return (
    <>
      <SafeAreaView>
        <StatusBar barStyle={'light-content'} />
        <Image
          // !!! Displaying Sarah Miller's image
          source={require('../../assets/images/sarah_miller_full.jpeg')}
          style={styles.image}
        />
        <View style={styles.mainContainer}>
          <Text style={styles.title}>Suggested People</Text>
          <View style={styles.body}>
            {/* First row contaning name, username, add button (w/o functionality) */}
            <View style={styles.addUserContainer}>
              <View style={styles.nameInfoContainer}>
                <Text style={styles.firstName}>{firstName}</Text>
                <Text style={styles.username}>{username}</Text>
              </View>
              <TouchableOpacity
                activeOpacity={0.5}
                // TODO: Call function to Add Friend
                onPress={() => console.log('Call add friend function')}>
                <View style={styles.addButton}>
                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
                </View>
              </TouchableOpacity>
            </View>
            {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */}
            <TaggsBar
              y={Animated.useValue(0)}
              // :: For testing purposes, to view user's own profile, pass userXId=''
              userXId={''}
              profileBodyHeight={0}
              screenType={screenType}
            />
            {/* TODO: Add MutualFriends here */}
          </View>
        </View>
        <TabsGradient />
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flexDirection: 'column',
    width: SCREEN_WIDTH * 0.9,
    height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
    justifyContent: 'space-between',
    alignSelf: 'center',
    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%',
  },
  body: {},
});
export default SuggestedPeopleScreen;