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

import EditNomDeBid from './EditNomDeBid.container.js';

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

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

export default function ViewProfile({
    addresses,
    avatar,
    editProfileAction,
    email,
    fullName,
    initials,
    isGeneratedNomDeBid,
    isRegisteredAccount,
    nomDeBid,
    phones,
}) {
    const _getSavedText = (count) => `${count} saved`;
    const addressesCountString = _getSavedText(addresses.length);
    const phonesCountString = _getSavedText(phones.length);

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

    const addressesTitle = 'addresses';
    const emailTitle = 'email';
    const numbersTitle = 'numbers';

    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 isStandalone />
                    ) : (
                        <Text style={styles.nom}>{nomDeBid}</Text>
                    )}
                    {!isEditingNom && isGeneratedNomDeBid && isRegisteredAccount && (
                        <Button title="Set bidding alias" onPress={() => setEditNom(true)} />
                    )}
                </View>
            </View>
            <View style={styles.emailWrap}>
                <Text style={styles.label}>{emailTitle}</Text>
                <Text style={styles.value}>{email}</Text>
            </View>
            <View style={styles.phonesWrap}>
                <Text style={styles.label}>{numbersTitle}</Text>
                <Text style={styles.value}>{phonesCountString}</Text>
            </View>
            <View style={styles.addressesWrap}>
                <Text style={styles.label}>{addressesTitle}</Text>
                <Text style={styles.value}>{addressesCountString}</Text>
            </View>
            {editProfileAction !== null && (
                <View style={styles.register}>
                    <Button title={STRINGS.EDIT} onPress={editProfileAction} />
                </View>
            )}
        </View>
    );
}

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

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