import React from 'react';
import {View, StyleSheet, ScrollView} from 'react-native';
import {ProfilePreviewType, ScreenType} from '../../types';
import {ProfilePreview} from '..';
import {Button} from 'react-native-elements';
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';

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 (
    <ScrollView
      keyboardShouldPersistTaps={'always'}
      stickyHeaderIndices={[4]}
      style={styles.scrollView}
      contentContainerStyle={styles.scrollViewContent}
      showsVerticalScrollIndicator={false}>
      {result.map((profilePreview) => (
        <View key={profilePreview.id} style={styles.container}>
          <ProfilePreview
            style={styles.friend}
            {...{profilePreview}}
            previewType={'Friend'}
            screenType={screenType}
          />
          {loggedInUser.userId === userId && (
            <Button
              title={'Unfriend'}
              buttonStyle={styles.button}
              titleStyle={styles.buttonTitle}
              onPress={() =>
                handleUnfriend(screenType, profilePreview, dispatch, state)
              }
            />
          )}
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: SCREEN_WIDTH * 0.93,
    alignItems: 'center',
  },
  header: {flexDirection: 'row'},
  friend: {
    marginVertical: 10,
  },
  title: {
    position: 'relative',
    fontSize: 17,
    fontWeight: 'bold',
    paddingBottom: 10,
    paddingTop: 10,
    flexGrow: 1,
    paddingLeft: '26%',
  },
  scrollView: {},
  scrollViewContent: {
    paddingBottom: SCREEN_HEIGHT / 15,
    paddingLeft: '4%',
    marginTop: '5%',
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.25,
    height: SCREEN_WIDTH * 0.075,
    borderColor: TAGG_LIGHT_BLUE,
    borderWidth: 2,
    borderRadius: 0,
    marginRight: '1%',
    marginLeft: '1%',
    padding: 0,
    backgroundColor: 'transparent',
  },
  buttonTitle: {
    color: TAGG_LIGHT_BLUE,
    padding: 0,
    fontSize: normalize(14),
    fontWeight: '700',
  },
});

export default Friends;