import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';

import { getEmailAvailability, getNomAvailability } from '../api/profile.js';

import styles from './Profile.styles.js';

const STRINGS = {
  EDIT: 'Edit profile',
};

export default function ViewProfile({
    addresses,
    avatar,
    editProfileAction,
    email,
    fullName,
    generatedNomDeBid,
    initials,
    nomDeBid,
    phones,
}) {
    const addressesCount = addresses.length;
    const phonesCount = phones.length;

    const [isEditingNom, setEditNom] = useState(false);

    return (
        <View style={styles.profileFormWrap}>
            <View style={styles.avatarWrap}>
                {avatar !== null ? (
                    <Avatar source={{ uri: avatar }} />
                ) : (
                    <Avatar title={initials} />
                )}
            </View>
            <View style={styles.nameWrap}>
                <Text style={styles.fullName}>{fullName}</Text>
                <View style={styles.nomWrap}>
                    {isEditingNom ? (
                      <EditNomDeBid
                    ) : (
                      <Text style={styles.nom}>{nomDeBid}</Text>
                      {generatedNomDeBid && (
                          <Button
                              title="Set bidding alias"
                              onPress={() => setEditNom(true)}
                          />
                      )}
                    )}
                </View>
            </View>
            <View style={styles.emailWrap}>
                <Text style={styles.label}>email</Text>
                <text style={styles.value}>{email}</Text>
            </View>
            <View style={styles.phonesWrap}>
                <Text style={styles.label}>numbers</Text>
                <Text style={styles.value}>{`${phonesCount} saved`}
            </View>
            <View style={styles.addressesWrap}>
                <Text style={styles.label}>addresses</Text>
                <Text style={styles.value}>{`${addressesCount} saved`}
            </View>
            {editProfileAction !== null && (
                <View style={styles.register}>
                    <Button title={STRINGS.EDIT} onPress={editProfile} />
                </View>
            )}
        </View>
    );
}

ViewProfile.propTypes = {
    addresses: PropTypes.array,
    avatar: PropTypes.string,
    editProfileAction: PropTypes.func,
    email: PropTypes.string,
    fullName: PropTypes.string,
    generatedNomDeBid: PropTypes.bool,
    initials: PropTypes.string,
    nomDeBid: PropTypes.string,
    phones: PropTypes.array,
};

ViewProfile.defaultProps = {
    addresses: [],
    avatar: null,
    editProfileAction: null,
    email: null,
    fullName: null,
    generatedNomDeBid: false,
    initials: null,
    nomDeBid: null,
    phones: [],
};

        return (
        );
    }
}