import React from 'react';
import {StyleSheet} from 'react-native';
import {Button} from 'react-native-elements';
import {ScreenType} from '../../types';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {handleFriendUnfriend, SCREEN_WIDTH} from '../../utils';
import {NO_PROFILE, NO_USER} from '../../store/initialStates';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {RootState} from 'src/store/rootReducer';

interface ProfileBodyProps {
  userXId: string | undefined;
  screenType: ScreenType;
}
const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
  const dispatch = useDispatch();

  const {user = NO_USER, profile = NO_PROFILE} = userXId
    ? useSelector((state: RootState) => state.userX[screenType][userXId])
    : useSelector((state: RootState) => state.user);

  const {user: loggedInUser = NO_USER} = useSelector(
    (state: RootState) => state.user,
  );

  const state = useStore().getState();

  const {friendship_status} = profile;

  return (
    <>
      {friendship_status === 'no_record' && (
        <Button
          title={'Add Friend'}
          buttonStyle={styles.button}
          titleStyle={styles.buttonTitle}
          onPress={() =>
            handleFriendUnfriend(
              screenType,
              user,
              profile,
              dispatch,
              state,
              loggedInUser,
            )
          } // requested, requested status
        />
      )}
      {friendship_status === 'friends' && (
        <Button
          title={'Unfriend'}
          buttonStyle={styles.requestedButton}
          titleStyle={styles.requestedButtonTitle}
          onPress={() =>
            handleFriendUnfriend(
              screenType,
              user,
              profile,
              dispatch,
              state,
              loggedInUser,
            )
          } // unfriend, no record status
        />
      )}
    </>
  );
};

const styles = StyleSheet.create({
  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',
  },
  buttonTitle: {
    color: 'white',
    padding: 0,
    fontSize: 14,
    fontWeight: '700',
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.4,
    height: SCREEN_WIDTH * 0.075,
    padding: 0,
    borderWidth: 2,
    borderColor: TAGG_LIGHT_BLUE,
    borderRadius: 0,
    marginRight: '2%',
    marginLeft: '1%',
    backgroundColor: TAGG_LIGHT_BLUE,
  },
});

export default FriendsButton;