import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import {useSelector} from 'react-redux';
import {ScreenType} from '../../types';
import {BottomDrawer, TabsGradient} from '../../components';
import {RootState} from '../../store/rootReducer';
import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {ProfilePreview} from '../profile';
import {normalize} from 'react-native-elements';

const MutualFriends: React.FC = () => {
  const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';

  let {friends} = userXId
    ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
    : useSelector((state: RootState) => state.friends);

  const friendsPreview = friends.slice(0, 5);
  const username = '@' + 'username';
  const count = 4;

  const [drawerVisible, setDrawerVisible] = useState(false);

  return (
    <>
      <SafeAreaView>
        <View style={styles.body}>
          <Text style={styles.title}>Mutual Friends</Text>
          <View style={styles.previewProfilesContainer}>
            {friendsPreview.map((profilePreview) => (
              <ProfilePreview
                previewType={'Suggested People Screen'}
                screenType={ScreenType.SuggestedPeople}
                profilePreview={profilePreview}
              />
            ))}
            {friends && friends.length > 0 && (
              <TouchableOpacity onPress={() => setDrawerVisible(true)}>
                <View style={styles.mutualFriendsButton}>
                  <Text style={styles.plusSign}>+</Text>
                  <Text style={styles.count}>{count}</Text>
                </View>
              </TouchableOpacity>
            )}
            <BottomDrawer
              initialSnapPosition={'38%'}
              showHeader={false}
              isOpen={drawerVisible}
              setIsOpen={setDrawerVisible}>
              <View style={styles.mainContainer}>
                <View style={styles.headerContainer}>
                  <View style={styles.headerTextContainer}>
                    <Text style={styles.headerTitle}>Mutual Friends</Text>
                    <Text style={styles.headerDescription} numberOfLines={2}>
                      {username} and you are both friends with
                    </Text>
                  </View>
                </View>
                <View style={styles.scrollViewContainer}>
                  <ScrollView
                    contentContainerStyle={styles.scrollView}
                    horizontal>
                    {friends.map((profilePreview) => (
                      <ProfilePreview
                        previewType={'Suggested People Drawer'}
                        screenType={ScreenType.SuggestedPeople}
                        profilePreview={profilePreview}
                      />
                    ))}
                  </ScrollView>
                </View>
                <TouchableOpacity
                  style={styles.cancelButton}
                  onPress={() => setDrawerVisible(false)}>
                  <Text style={styles.cancelButtonText}>Cancel</Text>
                </TouchableOpacity>
              </View>
            </BottomDrawer>
          </View>
        </View>
      </SafeAreaView>
      <TabsGradient />
    </>
  );
};

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'white',
    height: '100%',
  },
  body: {
    marginTop: HeaderHeight,
    width: SCREEN_WIDTH * 0.9,
    height: SCREEN_HEIGHT * 0.08,
    flexDirection: 'column',
    justifyContent: 'space-around',
  },
  title: {
    fontSize: normalize(12),
    lineHeight: normalize(14),
    color: '#fff',
    fontWeight: 'bold',
    letterSpacing: normalize(0.1),
  },
  mutualFriendsButton: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  plusSign: {
    fontSize: normalize(16),
    lineHeight: normalize(18),
    color: '#fff',
    fontWeight: 'bold',
    letterSpacing: normalize(0.1),
  },
  count: {
    fontSize: normalize(13),
    lineHeight: normalize(16),
    color: '#fff',
    fontWeight: 'bold',
    letterSpacing: normalize(0.1),
  },
  previewProfilesContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  mainContainer: {
    flexDirection: 'column',
    backgroundColor: '#f9f9f9',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.4,
    borderTopRightRadius: normalize(13),
    borderTopLeftRadius: normalize(13),
    borderWidth: 0.5,
    borderColor: '#fff',
  },
  headerContainer: {
    width: SCREEN_WIDTH + 2,
    height: '28%',
    borderTopRightRadius: normalize(13),
    borderTopLeftRadius: normalize(13),
    borderWidth: 1,
    borderColor: '#fff',
    backgroundColor: '#fff',
    shadowColor: '#7D7D7D',
    shadowOffset: {width: 3, height: 3},
    shadowRadius: 5,
    shadowOpacity: 0.15,
    marginBottom: 5.5,
    alignSelf: 'center',
  },
  headerTextContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    height: '100%',
    width: '90%',
    alignSelf: 'center',
    marginTop: '4%',
  },
  headerTitle: {
    fontSize: normalize(16),
    fontWeight: '700',
    lineHeight: normalize(20.29),
    marginBottom: '0.5%',
    letterSpacing: normalize(0.1),
  },
  headerDescription: {
    fontSize: normalize(13),
    lineHeight: normalize(15),
    fontWeight: '600',
    color: '#828282',
    paddingTop: '2%',
    letterSpacing: normalize(0.05),
  },
  scrollViewContainer: {
    height: 130,
    shadowColor: 'rgb(125, 125, 125)',
    marginTop: '1%',
  },
  scrollView: {
    backgroundColor: '#F9F9F9',
    height: '95%',
    padding: 0,
    marginHorizontal: '5%',
  },
  cancelButton: {
    backgroundColor: '#F0F0F0',
    height: '50%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelButtonText: {
    color: '#698DD3',
    fontSize: normalize(17),
    fontWeight: '700',
    lineHeight: normalize(20),
    letterSpacing: normalize(0.1),
  },
});

export default MutualFriends;