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>;
  authButton?: 0 | 1;
};

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

  switch (status) {
    case 4:
      return (
        <TouchableOpacity
          style={[
            styles.statusBtn,
            {
              flex: 1,
              paddingVertical: 10,
              borderWidth: 1,
              borderColor: Colors.ORANGE,
              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(14) }]}>Add friend</Text>
        </TouchableOpacity>
      );
    case 2:
      return (
        <View style={{ gap: 8, flex: 1, flexDirection: authButton === 0 ? 'row' : 'column' }}>
          {authButton === 1 ? (
            <Text style={[styles.statusTitle, { textAlign: 'center' }]}>Friendship pending</Text>
          ) : null}

          <View style={[styles.statusContainer]}>
            {authButton === 0 ? <Text style={[styles.statusTitle]}>Friendship pending</Text> : null}
            <TouchableOpacity
              style={[
                styles.statusBtn,
                {
                  paddingVertical: 10,
                  backgroundColor: Colors.ORANGE,
                  borderWidth: 1,
                  flex: 1.5,
                  borderColor: Colors.ORANGE
                }
              ]}
              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(13) : getFontSize(14) }
                ]}
              >
                Approve
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[
                styles.statusBtn,
                {
                  paddingVertical: 10,
                  backgroundColor: Colors.RED,
                  borderWidth: 1,
                  flex: 1,
                  borderColor: Colors.RED
                }
              ]}
              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(13) : getFontSize(14) }
                ]}
              >
                Deny
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    case 3:
      return (
        <View
          style={{
            gap: 8,
            flex: 1,
            flexDirection: authButton === 0 ? 'row' : 'column'
          }}
        >
          {authButton === 1 ? (
            <Text style={[styles.statusTitle, { textAlign: 'center' }]}>Friendship pending</Text>
          ) : null}

          <View style={styles.statusContainer}>
            {authButton === 0 ? <Text style={[styles.statusTitle]}>Friendship pending</Text> : null}
            <TouchableOpacity
              style={[
                styles.statusBtn,
                {
                  padding: 10,
                  backgroundColor: Colors.RED,
                  flex: 1,
                  borderWidth: 1,
                  borderColor: Colors.RED
                }
              ]}
              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>
        </View>
      );
    default:
      return null;
  }
};

export default FriendStatus;
