import React, {Fragment} from 'react';
import {
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {NO_PROFILE, NO_USER} from '../../store/initialStates';
import {RootState} from '../../store/rootReducer';
import {ScreenType} from '../../types';
import {handleFriendUnfriend, normalize, SCREEN_WIDTH} from '../../utils';

interface FriendsButtonProps {
  userXId: string | undefined;
  screenType: ScreenType;
  friendship_requester_id: string;
  onAcceptRequest: () => void;
  onRejectRequest: () => void;
}
const FriendsButton: React.FC<FriendsButtonProps> = ({
  userXId,
  screenType,
  friendship_requester_id,
  onAcceptRequest,
  onRejectRequest,
}) => {
  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;

  const outlineButton: [StyleProp<ViewStyle>, StyleProp<TextStyle>] = [
    [styles.button, styles.transparentBG],
    [styles.label, styles.blueLabel],
  ];

  const filledButton: [StyleProp<ViewStyle>, StyleProp<TextStyle>] = [
    [styles.button, styles.lightBlueBG],
    [styles.label, styles.whiteLabel],
  ];

  const renderButton = (
    title: string,
    style: [StyleProp<ViewStyle>, StyleProp<TextStyle>],
    onPress?: () => void,
  ) => (
    <TouchableOpacity
      style={style[0]}
      onPress={() =>
        onPress
          ? onPress()
          : handleFriendUnfriend(
              screenType,
              user,
              profile,
              dispatch,
              state,
              loggedInUser,
            )
      }>
      <Text style={style[1]}>{title}</Text>
    </TouchableOpacity>
  );

  switch (friendship_status) {
    case 'friends':
      return renderButton('Unfriend', outlineButton);
    case 'requested':
      if (friendship_requester_id !== userXId) {
        return renderButton('Requested', outlineButton);
      } else {
        return (
          <View style={styles.row}>
            {renderButton('Accept', filledButton, onAcceptRequest)}
            {renderButton('Reject', outlineButton, onRejectRequest)}
          </View>
        );
      }
    case 'no_record':
      return renderButton('Add Friend', filledButton);
    default:
      return <Fragment />;
  }
};

const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.4,
    aspectRatio: 154 / 33,
    borderWidth: 2,
    borderColor: TAGG_LIGHT_BLUE,
    borderRadius: 3,
    marginRight: '2%',
    marginLeft: '1%',
  },
  transparentBG: {
    backgroundColor: 'transparent',
  },
  lightBlueBG: {
    backgroundColor: TAGG_LIGHT_BLUE,
  },
  label: {
    fontSize: normalize(15),
    fontWeight: '700',
    letterSpacing: 1,
  },
  blueLabel: {
    color: TAGG_LIGHT_BLUE,
  },
  whiteLabel: {
    color: 'white',
  },
  row: {
    flex: 1,
    flexDirection: 'row',
  },
});

export default FriendsButton;