import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Button} from 'react-native-elements';
import {useDispatch, useStore} from 'react-redux';
import {
  declineFriendRequest,
  loadUserNotifications,
  updateUserXFriends,
} from '../../store/actions';
import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
import {acceptFriendRequest} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';

interface AcceptDeclineButtonsProps {
  requester: ProfilePreviewType;
}
const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = (props) => {
  const {requester} = props;
  const state: RootState = useStore().getState();
  const dispatch = useDispatch();

  const handleAcceptRequest = async () => {
    dispatch(acceptFriendRequest(requester));
    dispatch(updateUserXFriends(requester.id, state));
    dispatch(loadUserNotifications());
  };

  const handleDeclineFriendRequest = async () => {
    dispatch(declineFriendRequest(requester.id));
  };
  return (
    <>
      <Button
        title="Accept"
        buttonStyle={styles.acceptButton}
        titleStyle={styles.acceptButtonTitle}
        onPress={() => handleAcceptRequest()}
      />
      <Button
        title="Reject"
        buttonStyle={styles.rejectButton}
        titleStyle={styles.rejectButtonTitle}
        onPress={() => handleDeclineFriendRequest()}
      />
    </>
  );
};

const styles = StyleSheet.create({
  acceptButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.2,
    height: SCREEN_WIDTH * 0.07,
    borderRadius: 5,
    padding: 0,
    marginRight: '2%',
    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
  },
  rejectButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.2,
    height: SCREEN_WIDTH * 0.07,
    borderColor: TAGG_TEXT_LIGHT_BLUE,
    borderWidth: 1,
    borderRadius: 5,
    marginRight: '2%',
    padding: 0,
    backgroundColor: 'white',
  },
  rejectButtonTitle: {
    color: TAGG_TEXT_LIGHT_BLUE,
    padding: 0,
    fontSize: 14,
    fontWeight: '800',
  },
  acceptButtonTitle: {
    color: 'white',
    padding: 0,
    fontSize: 14,
    fontWeight: '800',
  },
});

export default AcceptDeclineButtons;