import React from 'react';
import PropTypes from 'prop-types';

import { Button } from 'react-native-elements';
import { Alert, Text, View } from 'react-native';

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

export default function PhoneListItem({
    hideDelete,
    index,
    label,
    number,
    handleDelete,
    handleEdit,
    handleEditStart,
}) {

    const _onLongPressDelete = () => {
        handleDelete(index);
    };

    const _onPressDelete = (isLongPress = false) => () => {
        if (isLongPress) {
            handleDelete(index);
            return;
        }

        Alert.alert(
            'Delete this number?',
            'Are you sure you want to delete this number?',
            [
                { text: 'Cancel', style: 'cancel' },
                { text: 'OK', onPress: () => handleDelete(index) },
            ],
            { cancelable: true },
        );
    };

    return (
        <View style={styles.listItem}>
            <View style={styles.listValue}>
                <Text style={styles.value}>{number}</Text>
                <Text style={styles.label}>{label}</Text>
            </View>
            <View style={styles.listActions}>
                {handleEdit !== null && <Button accessibilityLabel={`Edit`} onPress={() => handleEditStart()} />}
                {!hideDelete && (
                    <Button
                        accessibilityLabel={`Delete`}
                        onLongPress={_onPressDelete(true)}
                        onPress={_onPressDelete()}
                    />
                )}
            </View>
        </View>
    );
}

PhoneListItem.propTypes = {
    hideDelete: PropTypes.bool,
    index: PropTypes.number.isRequired,
    label: PropTypes.string.isRequired,
    number: PropTypes.string.isRequired,
    handleDelete: PropTypes.func.isRequired,
    handleEdit: PropTypes.func,
    handleEditStart: PropTypes.func.isRequired,
};

PhoneListItem.defaultProps = {
    hideDelete: false,
    handleEdit: null,
};