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

interface FriendsProps {
  result: Array<ProfilePreviewType>;
  screenType: ScreenType;
  userXId: string;
}

const Friends: React.FC<FriendsProps> = ({result, screenType, userXId}) => {
  const navigation = useNavigation();

  const state: RootState = useStore().getState();
  const dispatch = useDispatch();

  return (
    <ScrollView
      keyboardShouldPersistTaps={'always'}
      stickyHeaderIndices={[4]}
      style={styles.scrollView}
      contentContainerStyle={styles.scrollViewContent}
      showsVerticalScrollIndicator={false}>
      {result.map((profilePreview) => (
        <View key={profilePreview.id}>
          <ProfilePreview
            style={styles.friend}
            {...{profilePreview}}
            previewType={'Friend'}
            screenType={screenType}
          />
          <Button
            title={'Unfriend'}
            buttonStyle={styles.requestedButton}
            titleStyle={styles.requestedButtonTitle}
            onPress={() =>
              handleUnfriend(screenType, profilePreview, dispatch, state)
            } // unfriend, no record status
          />
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  header: {flexDirection: 'row'},
  friend: {
    marginVertical: 10,
  },
  title: {
    position: 'relative',
    fontSize: 17,
    fontWeight: 'bold',
    paddingBottom: 10,
    paddingTop: 10,
    flexGrow: 1,
    paddingLeft: '26%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  buttonText: {
    color: 'black',
    fontSize: 18,
    fontWeight: '400',
  },
  scrollView: {},
  scrollViewContent: {
    paddingBottom: SCREEN_HEIGHT / 15,
    paddingHorizontal: 15,
    marginTop: '5%',
    backgroundColor: 'lightgrey',
  },
  requestedButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.4,
    height: SCREEN_WIDTH * 0.075,
    borderColor: TAGG_LIGHT_BLUE,
    borderWidth: 2,
    borderRadius: 0,
    marginRight: '2%',
    marginLeft: '1%',
    padding: 0,
    backgroundColor: 'transparent',
  },
  requestedButtonTitle: {
    color: TAGG_LIGHT_BLUE,
    padding: 0,
    fontSize: 14,
    fontWeight: '700',
  },
});

export default Friends;