import React from 'react';
import {View, StyleSheet, ScrollView, Text} from 'react-native';
import {ProfilePreviewType, ScreenType} from '../../types';
import {ProfilePreview} from '..';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {RootState} from '../../store/rootReducer';
import {useDispatch, useStore} from 'react-redux';
import {handleUnfriend} from '../../utils/friends';
import {NO_USER} from '../../store/initialStates';
import {TouchableOpacity} from 'react-native-gesture-handler';

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;

  return (
    <>
      <View style={styles.subheader}>
        {/* <Text style={styles.subheaderText}>Friends</Text> */}
      </View>
      <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.button}
                onPress={() =>
                  handleUnfriend(screenType, profilePreview, dispatch, state)
                }>
                <Text style={styles.buttonTitle}>Unfriend</Text>
              </TouchableOpacity>
            )}
          </View>
        ))}
      </ScrollView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flexDirection: 'column',
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.85,
  },
  scrollViewContent: {
    alignSelf: 'center',
    paddingBottom: SCREEN_HEIGHT / 7,
    width: SCREEN_WIDTH * 0.85,
    marginTop: '1%',
  },
  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),
  },
  container: {
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    height: normalize(42),
    alignItems: 'center',
    marginBottom: '5%',
  },
  friend: {
    alignSelf: 'center',
    height: '100%',
  },
  button: {
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '55%',
    borderColor: TAGG_LIGHT_BLUE,
    borderWidth: 2,
    borderRadius: 2,
    padding: 0,
    backgroundColor: 'transparent',
  },
  buttonTitle: {
    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;