// Metro module 16270 (f16271).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import Module13000 from "../../../../_bundle/Module13000";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../../intl/index.native";
import FastImage from "../../../../components_native/common/FastImage";
import { Icon } from "../../../../design/void/native";
import Module11872 from "../../../../_bundle/Module11872";
const useStyles = createStyles({
  avatarContainer: {
    display: "flex",
    paddingTop: 24
  },
  defaultLogoStyle: {
    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
    width: 96
  },
  uploadedAvatarStyle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    position: "relative"
  },
  avatarWrapper: {
    borderColor: Module712.colors.BORDER_MUTED,
    borderStyle: "dashed",
    borderWidth: 2,
    borderRadius: Module712.radii.round,
    width: 200,
    height: 200,
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    overflow: "visible"
  },
  uploadAvatarWrapper: {
    backgroundColor: Module712.colors.BACKGROUND_BRAND,
    borderRadius: Module712.radii.round,
    tintColor: Module712.colors.BACKGROUND_BASE_LOW,
    position: "absolute",
    right: 10,
    top: 10,
    width: 40,
    height: 40,
    flex: 1,
    justifyContent: "center"
  },
  uploadAvatarIcon: {
    tintColor: Module712.colors.WHITE,
    alignSelf: "center"
  }
});
export default function TouchableUploadAvatar(props) {
  let source;
  const { avatarSource, showPendingAvatar = false, onSelectAvatar } = props;
  const styles = useStyles();
  if (showPendingAvatar) {
    source = avatarSource;
    if (source == null) {
      source = Module13000;
    }
  } else {
    source = Module13000;
  }
  const style = showPendingAvatar && avatarSource != null ? styles.uploadedAvatarStyle : styles.defaultLogoStyle;
  return <View style={styles.avatarContainer}>
    <PressableOpacity onPress={onSelectAvatar} accessibilityRole="button" accessibilityLabel={intl.string(t["70lEQe"])}>
      <View style={styles.avatarWrapper}>
        <FastImage resizeMode="contain" style={style} source={source} />
        <View style={styles.uploadAvatarWrapper}>
          <Icon size={Icon.Sizes.MEDIUM} source={Module11872} style={styles.uploadAvatarIcon} />
        </View>
      </View>
    </PressableOpacity>
  </View>;
};