import { Image, View, TouchableOpacity, Text } from 'react-native'
import React from 'react'
import styles from '../styles'
import Icons from '../../../../utils/icons/icons'
import { useTheme } from '@react-navigation/native'
import { windowHeight } from '../../../../theme/appConstant'
import { useValues } from '../../../../utils/context'
import appColors from '../../../../theme/appColors'

export function ImageContainer({ data, openBottomSheet, imageUri }: any) {
  const { colors } = useTheme()
  const userName = data?.name || ''
  const firstLetter = userName.charAt(0).toUpperCase()
  const { isDark } = useValues()

  return (
    <View style={{ marginTop: windowHeight(0) }}>
      <View
        style={[
          styles.profileImageView,
          {
            backgroundColor: colors.card,
            borderColor: isDark ? appColors.bgDark : appColors.lightGray,
          },
        ]}
      >
        {imageUri ? (
          <Image style={styles.profileImage} source={{ uri: imageUri }} />
        ) : (
          <View style={styles.charImage}>
            <Text style={styles.firstLetter}>{firstLetter}</Text>
          </View>
        )}

        <TouchableOpacity
          activeOpacity={0.7}
          style={[
            styles.editIconContainer,
            { borderColor: colors.border, backgroundColor: colors.card },
          ]}
          onPress={openBottomSheet}
        >
          <Icons.Camera color={colors.text} />
        </TouchableOpacity>
      </View>
    </View>
  )
}
