import React, { FC } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Image } from 'expo-image';
import { useNavigation } from '@react-navigation/native';

import { AvatarWithInitials } from 'src/components';
import { NAVIGATION_PAGES } from 'src/types';
import { API_HOST } from 'src/constants';
import { adaptiveStyle, Colors } from 'src/theme';
import {
  ProfileStyles,
  ScoreStyles
} from 'src/screens/InAppScreens/TravellersScreen/Components/styles';
import { getFontSize } from 'src/utils';

import TickIcon from 'assets/icons/tick.svg';
import UNIcon from 'assets/icons/un_icon.svg';
import UN25Icon from 'assets/icons/un-25.svg';
import UN50Icon from 'assets/icons/un-50.svg';
import UN75Icon from 'assets/icons/un-75.svg';
import UN100Icon from 'assets/icons/un-100.svg';
import UN150Icon from 'assets/icons/un-150.svg';
import NMIcon from 'assets/icons/nm_icon.svg';
import PremiumIcon from 'assets/icons/premium.svg';

import { styles } from '../../Components/styles';
import { ActivityIndicator } from 'react-native-paper';

type Props = {
  avatar: string | null;
  first_name: string;
  last_name: string;
  date_of_birth: number;
  homebase_flag: string;
  homebase2_flag: string | null;
  index: number;
  score: any[];
  active_score: number;
  tbt_score?: number;
  tbt_rank?: number;
  badge_tbt?: number;
  badge_1281: number;
  badge_un: number;
  badge_un_25: number;
  badge_un_50: number;
  badge_un_75: number;
  badge_un_100: number;
  badge_un_150: number;
  badge_premium: number;
  auth: number;
  userId: number;
  type: 'friends' | 'sent' | 'received';
  updateFriendStatus: (status: number, id: number) => void;
  hideRequest: (id: number) => void;
  friendDbId: number;
  status: number;
  loadingStatus: string | null;
};

export const FriendsProfile: FC<Props> = ({
  avatar,
  first_name,
  last_name,
  date_of_birth,
  homebase_flag,
  homebase2_flag,
  score,
  active_score,
  badge_1281,
  badge_un,
  badge_un_25,
  badge_un_50,
  badge_un_75,
  badge_un_100,
  badge_un_150,
  badge_premium,
  auth,
  userId,
  type,
  updateFriendStatus,
  hideRequest,
  friendDbId,
  status,
  loadingStatus
}) => {
  const navigation = useNavigation();

  const scoreNames = ['NM', 'UN', 'UN+', 'DARE', 'TCC', 'DEEP', 'SLOW', 'YES', 'KYE', 'WHS', 'TBT'];

  const handlePress = () => {
    navigation.navigate(...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId }] as never));
  };

  const renderStatus = () => {
    switch (type) {
      case 'sent':
        return (
          <View style={{ alignItems: 'center', flexDirection: 'row', gap: 12, marginTop: 4 }}>
            <Text style={styles.statusTitleSmall}>
              {status === 4 ? 'Canceled' : status === 2 ? 'Denied' : 'Pending'}
            </Text>
            <TouchableOpacity
              style={[
                styles.statusBtn,
                {
                  borderWidth: 1,
                  borderColor: status === 3 ? Colors.RED : Colors.TEXT_GRAY,
                  paddingVertical: 6,
                  paddingHorizontal: 10
                },
                loadingStatus === `4-${friendDbId}` || loadingStatus === `${friendDbId}`
                  ? { opacity: 0.6 }
                  : {}
              ]}
              onPress={() =>
                status === 3 ? updateFriendStatus(4, friendDbId) : hideRequest(friendDbId)
              }
              disabled={
                status === 3
                  ? loadingStatus === `4-${friendDbId}`
                  : loadingStatus === `${friendDbId}`
              }
            >
              {loadingStatus === `4-${friendDbId}` || loadingStatus === `${friendDbId}` ? (
                <ActivityIndicator
                  size={13}
                  color={status === 3 ? Colors.RED : Colors.TEXT_GRAY}
                  style={{ paddingHorizontal: 6 }}
                />
              ) : (
                <Text
                  style={{
                    fontSize: getFontSize(10),
                    fontFamily: 'redhat-600',
                    color: status === 3 ? Colors.RED : Colors.TEXT_GRAY
                  }}
                >
                  {status === 3 ? 'Cancel' : 'Hide'}
                </Text>
              )}
            </TouchableOpacity>
          </View>
        );
      case 'received':
        return (
          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginTop: 4 }}>
            <Text style={styles.statusTitleSmall}>{status === 3 ? 'Pending' : 'Denied'}</Text>
            {status === 3 ? (
              <>
                <TouchableOpacity
                  style={[
                    styles.statusBtn,
                    {
                      borderWidth: 1,
                      borderColor: Colors.ORANGE,
                      paddingVertical: 6,
                      paddingHorizontal: 10
                    },
                    loadingStatus === `1-${friendDbId}` ? { opacity: 0.6 } : {}
                  ]}
                  onPress={() => updateFriendStatus(1, friendDbId)}
                  disabled={loadingStatus === `1-${friendDbId}`}
                >
                  {loadingStatus === `1-${friendDbId}` ? (
                    <ActivityIndicator
                      size={13}
                      color={Colors.ORANGE}
                      style={{ paddingHorizontal: 12 }}
                    />
                  ) : (
                    <Text
                      style={[
                        styles.statusTextSmall,
                        {
                          color: Colors.ORANGE
                        }
                      ]}
                    >
                      Approve
                    </Text>
                  )}
                </TouchableOpacity>
                <TouchableOpacity
                  style={[
                    styles.statusBtn,
                    {
                      borderWidth: 1,
                      borderColor: Colors.RED,
                      paddingVertical: 6,
                      paddingHorizontal: 10
                    },
                    loadingStatus === `2-${friendDbId}` ? { opacity: 0.6 } : {}
                  ]}
                  onPress={() => updateFriendStatus(2, friendDbId)}
                  disabled={loadingStatus === `2-${friendDbId}`}
                >
                  {loadingStatus === `2-${friendDbId}` ? (
                    <ActivityIndicator
                      size={13}
                      color={Colors.RED}
                      style={{ paddingHorizontal: 6 }}
                    />
                  ) : (
                    <Text
                      style={[
                        styles.statusTextSmall,
                        {
                          color: Colors.RED
                        }
                      ]}
                    >
                      Deny
                    </Text>
                  )}
                </TouchableOpacity>
              </>
            ) : (
              <TouchableOpacity
                style={[
                  styles.statusBtn,
                  {
                    borderWidth: 1,
                    borderColor: Colors.TEXT_GRAY,
                    paddingVertical: 6,
                    paddingHorizontal: 10
                  }
                ]}
                onPress={() => hideRequest(friendDbId)}
              >
                <Text
                  style={[
                    styles.statusTextSmall,
                    {
                      color: Colors.TEXT_GRAY
                    }
                  ]}
                >
                  Hide
                </Text>
              </TouchableOpacity>
            )}
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <View style={ProfileStyles.wrapper}>
      <TouchableOpacity
        onPress={() => handlePress()}
        style={{ flex: 1, paddingHorizontal: 8, paddingVertical: 3 }}
      >
        <View style={adaptiveStyle(ProfileStyles.profileRoot, {})}>
          <View style={{ position: 'relative' }}>
            {avatar ? (
              <Image
                style={adaptiveStyle(ProfileStyles.profileAvatar, {})}
                source={{ uri: API_HOST + avatar }}
              />
            ) : homebase_flag ? (
              <AvatarWithInitials
                text={`${first_name[0] ?? ''}${last_name[0] ?? ''}`}
                flag={API_HOST + homebase_flag}
                size={48}
              />
            ) : null}
            <View
              style={{
                position: 'absolute',
                bottom: 0,
                right: 0,
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              {badge_premium ? <PremiumIcon width={16} height={16} /> : null}
            </View>
          </View>
          <View style={adaptiveStyle(ProfileStyles.profileDataRoot, {})}>
            <Text
              style={adaptiveStyle(
                [ProfileStyles.profileFirstLastName, { fontSize: getFontSize(14), flex: 0 }],
                {}
              )}
            >
              {first_name ?? ''} {last_name ?? ''}
            </Text>
            <View style={adaptiveStyle(ProfileStyles.profileDataContainer, {})}>
              <View style={adaptiveStyle(ProfileStyles.profileDataWrapper, {})}>
                <Text style={adaptiveStyle(ProfileStyles.profileAge, {})}>
                  Age: {date_of_birth ?? ''}
                </Text>
                {homebase_flag && (
                  <Image
                    source={{ uri: API_HOST + homebase_flag }}
                    style={adaptiveStyle(ProfileStyles.countryFlag, {})}
                  />
                )}
                {homebase2_flag && homebase2_flag !== homebase_flag ? (
                  <Image
                    source={{ uri: API_HOST + homebase2_flag }}
                    style={adaptiveStyle([ProfileStyles.countryFlag, { marginLeft: -15 }], {})}
                  />
                ) : null}
                <View style={adaptiveStyle(ProfileStyles.badgesWrapper, {})}>
                  {auth ? <TickIcon /> : null}
                  {badge_un ? <UNIcon /> : null}
                  {badge_1281 ? <NMIcon /> : null}
                  {badge_un_150 ? <UN150Icon /> : null}
                  {badge_un_100 ? <UN100Icon /> : null}
                  {badge_un_75 ? <UN75Icon /> : null}
                  {badge_un_50 ? <UN50Icon /> : null}
                  {badge_un_25 ? <UN25Icon /> : null}
                </View>
              </View>
            </View>
            {renderStatus()}
          </View>
          <View style={{ alignItems: 'center' }}>
            <Text style={adaptiveStyle(ScoreStyles.activeScoreRanking, {})}>
              {score[active_score]}
            </Text>
            <Text style={adaptiveStyle(ScoreStyles.activeScoreName, {})}>
              {scoreNames[active_score]}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};
