import { Image, View, TouchableOpacity, Text } from "react-native";
import React from "react";
import { appColors, windowHeight } from "@src/themes";
import { useValues } from "@src/utils/context";
import Images from "@src/utils/images";
import { Camera } from "@utils/icons";
import { styles } from "../style";

export function ImageContainer({ data, imageUri, bottomSheetRef }: any) {
  const { bgFullStyle, isDark } = useValues();

  return (
    <>
      <View
        style={[
          styles.profileImageContainer,
          { borderColor: isDark ? appColors.solidBorder : appColors.lightGray },
        ]}
      >
        <View
          style={[
            styles.profileImageWrapper,
            {
              backgroundColor: isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
            },
          ]}
        >
          {imageUri ? (
            <Image style={styles.profileImage} source={{ uri: imageUri }} />
          ) : (
            <Text
              style={[
                styles.char,
                {
                  color: isDark ? appColors.whiteColor : appColors.blackColor,
                  backgroundColor: isDark
                    ? appColors.darkHeader
                    : appColors.whiteColor,
                },
              ]}
            >
              {data?.name?.charAt(0) || ""}
            </Text>
          )}
          <View
            style={[
              styles.editIconContainer,
              {
                backgroundColor: isDark
                  ? appColors.darkHeader
                  : appColors.whiteColor,
                borderColor: isDark ? appColors.solidBorder : appColors.go,
              },
            ]}
          >
            <TouchableOpacity
              onPress={() => bottomSheetRef.current?.present()}
              activeOpacity={0.7}
            >
              <Camera />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </>
  );
}
