import React, { FC } from 'react';
import { View, TouchableOpacity, Text, Dimensions } from 'react-native';
import { Colors } from 'src/theme';
import { getFontSize } from 'src/utils';
import { styles } from './styles';

type FriendStatusProps = {
  status: number | null;
  data: {
    firstName: string;
    lastName: string;
  };
  setModalInfo: (info: any) => void;
  handleSendFriendRequest: () => Promise<void>;
  handleUpdateFriendStatus: (status: number) => Promise<void>;
};

const FriendStatus: FC<FriendStatusProps> = ({
  status,
  data,
  setModalInfo,
  handleSendFriendRequest,
  handleUpdateFriendStatus
}) => {
  const isSmallScreen = Dimensions.get('window').width < 385;

  switch (status) {
    case 4:
      return (
        <View>
          <TouchableOpacity
            style={[
              styles.statusBtn,
              {
                paddingVertical: 11,
                paddingHorizontal: 12,
                backgroundColor: Colors.ORANGE
              }
            ]}
            onPress={() =>
              setModalInfo({
                isVisible: true,
                type: 'friend',
                message: `Are you sure you want to send a friend request to ${data.firstName} ${data.lastName}?`,
                action: handleSendFriendRequest,
                title: ''
              })
            }
          >
            <Text style={[styles.statusText, { fontSize: getFontSize(15) }]}>Add friend</Text>
          </TouchableOpacity>
        </View>
      );
    case 2:
      return (
        <View style={styles.statusContainer}>
          <Text style={[styles.statusTitle, isSmallScreen ? { flex: 1.5 } : {}]}>
            Friendship pending
          </Text>
          <TouchableOpacity
            style={[
              styles.statusBtn,
              {
                paddingVertical: 11,
                paddingHorizontal: 12,
                backgroundColor: Colors.ORANGE,
                flex: 1
              }
            ]}
            onPress={() =>
              setModalInfo({
                isVisible: true,
                type: 'confirm',
                message: `Are you sure you want to accept the friend request from ${data.firstName} ${data.lastName}?`,
                action: () => handleUpdateFriendStatus(1),
                title: ''
              })
            }
          >
            <Text
              style={[
                styles.statusText,
                { fontSize: isSmallScreen ? getFontSize(14) : getFontSize(15) }
              ]}
            >
              Approve
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.statusBtn,
              {
                paddingVertical: 11,
                paddingHorizontal: 12,
                backgroundColor: Colors.RED,
                flex: 1
              }
            ]}
            onPress={() =>
              setModalInfo({
                isVisible: true,
                type: 'confirm',
                message: `Are you sure you want to reject the friend request from ${data.firstName} ${data.lastName}?`,
                action: () => handleUpdateFriendStatus(2),
                title: ''
              })
            }
          >
            <Text
              style={[
                styles.statusText,
                { fontSize: isSmallScreen ? getFontSize(14) : getFontSize(15) }
              ]}
            >
              Deny
            </Text>
          </TouchableOpacity>
        </View>
      );
    case 3:
      return (
        <View style={styles.statusContainer}>
          <Text style={styles.statusTitle}>Friendship pending</Text>
          <TouchableOpacity
            style={[
              styles.statusBtn,
              {
                paddingVertical: 8,
                paddingHorizontal: 12,
                backgroundColor: Colors.RED,
                flex: 1
              }
            ]}
            onPress={() =>
              setModalInfo({
                isVisible: true,
                type: 'confirm',
                message: `Are you sure you want to cancel the friend request sent to ${data.firstName} ${data.lastName}?`,
                action: () => handleUpdateFriendStatus(4),
                title: ''
              })
            }
          >
            <Text style={styles.statusText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      );
    default:
      return null;
  }
};

export default FriendStatus;
