import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'
import React from 'react'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics';
import colors from '../../../constants/colors';
import images from '../../../assets/images/images';
import EditButton from '../../atoms/Buttons/EditButton';
import IonIcon from 'react-native-vector-icons/Ionicons'

const PROFILE_SIZE = 128;
const EDIT_ICON_SIZE = 20

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

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

    return (
        <View style={styles.profileImageContainer}>
            <ImageBackground source={source ?? images.imageCard} style={styles.profileImageView} imageStyle={styles.profileImage}>
                <TouchableOpacity onPress={onEdit}>
                    <View style={styles.editIcon}>
                        <IonIcon name={'camera'} color={colors().white} size={EDIT_ICON_SIZE} />
                    </View>
                </TouchableOpacity>
            </ImageBackground>
        </View>
    )
}

export default ProfileImageCard

