import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'
import React from 'react'
import images from '../../../assets/images/images'
import EditButton from '../Buttons/EditButton';
import colors from '../../../theme/colors';

const PROFILE_SIZE = 128;
const EDIT_ICON_SIZE = 14

const ProfileImageCard = (props) => {
    const {
        source,
        onEdit
    } = props

    return (
        <View style={styles.profileImageContainer}>
            <ImageBackground source={source ?? images.imageCard} style={styles.profileImageView} imageStyle={styles.profileImage}>
                <TouchableOpacity onPress={true}>
                    <View style={styles.editIcon}>
                        <EditButton iconSize={EDIT_ICON_SIZE} iconColor={colors.white} onPress={onEdit}/>
                    </View>
                </TouchableOpacity>
            </ImageBackground>
        </View>
    )
}

export default ProfileImageCard

const styles = StyleSheet.create({
    profileImageContainer: {
        paddingVertical: 16,
        alignItems: 'center',
    },
    profileImage: {
        height: PROFILE_SIZE,
        width: PROFILE_SIZE,
        borderRadius: PROFILE_SIZE
    },
    profileImageView: {
        height: PROFILE_SIZE,
        width: PROFILE_SIZE,
        borderRadius: PROFILE_SIZE,
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
        padding: 8
    },
    editIcon:{
        alignSelf: 'flex-end',
        justifyContent: 'flex-end',
        backgroundColor: colors.primaryColor,
        padding: 4,
        borderRadius: 32
    }
})