text: import React from "react";
  import { StyleSheet, Dimensions, ScrollView, Image, ImageBackground, Platform } from "react-native";
  import { Block, Text, theme } from "galio-framework";
  
  import { Button } from "../../components";
  import { Images, argonTheme } from "../../constants";
  import { HeaderHeight } from "../../constants/utils";
  
  // Internationalization
  import i18n from '../../i18n';
  
  const { width, height } = Dimensions.get("screen");
  
  const thumbMeasure = (width - 48 - 32) / 3;
  
  class Profile extends React.Component {
    render() {
      return (
        <Block flex style={styles.profile}>
          <Block flex>
            <ImageBackground
              source={Images.ProfileBackground}
              style={styles.profileContainer}
              imageStyle={styles.profileBackground}
            >
              <ScrollView
                showsVerticalScrollIndicator={false}
                style={{ width, marginTop: '25%' }}
              >
                <Block flex style={styles.profileCard}>
                  <Block middle style={styles.avatarContainer}>
                    <Image
                      source={{ uri: Images.ProfilePicture }}
                      style={styles.avatar}
                    />
                  </Block>
                  <Block style={styles.info}>
                    <Block
                      middle
                      row
                      space="evenly"
                      style={{ marginTop: 20, paddingBottom: 24 }}
                    >
                      <Button
                        small
                        style={{ backgroundColor: argonTheme.COLORS.INFO }}
                      >
                        {i18n.t('profile.connect')}
                      </Button>
                      <Button
                        small
                        style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
                      >
                        {i18n.t('profile.message')}
                      </Button>
                    </Block>
                    <Block row space="between">
                      <Block middle>
                        <Text
                          bold
                          size={12}
                          color="#525F7F"
                          style={{ marginBottom: 4 }}
                        >
                          2K
                        </Text>
                        <Text size={12}>{i18n.t('profile.orders')}</Text>
                      </Block>
                      <Block middle>
                        <Text
                          bold
                          color="#525F7F"
                          size={12}
                          style={{ marginBottom: 4 }}
                        >
                          10
                        </Text>
                        <Text size={12}>{i18n.t('profile.photos')}</Text>
                      </Block>
                      <Block middle>
                        <Text
                          bold
                          color="#525F7F"
                          size={12}
                          style={{ marginBottom: 4 }}
                        >
                          89
                        </Text>
                        <Text size={12}>{i18n.t('profile.comments')}</Text>
                      </Block>
                    </Block>
                  </Block>
                  <Block flex>
                    <Block middle style={styles.nameInfo}>
                      <Text bold size={28} color="#32325D">
                        Jessica Jones, 27
                      </Text>
                      <Text size={16} color="#32325D" style={{ marginTop: 10 }}>
                        San Francisco, USA
                      </Text>
                    </Block>
                    <Block middle style={{ marginTop: 30, marginBottom: 16 }}>
                      <Block style={styles.divider} />
                    </Block>
                    <Block middle>
                      <Text
                        size={16}
                        color="#525F7F"
                        style={{ textAlign: "center" }}
                      >
                        {i18n.t('profile.text')}
                      </Text>
                      <Button
                        color="transparent"
                        textStyle={{
                          color: "#233DD2",
                          fontWeight: "500",
                          fontSize: 16
                        }}
                      >
                        {i18n.t('profile.showMore')}
                      </Button>
                    </Block>
                    <Block
                      row
                      style={{ paddingVertical: 14, alignItems: "baseline" }}
                    >
                      <Text bold size={16} color="#525F7F">
                      {i18n.t('profile.album')}
                      </Text>
                    </Block>
                    <Block
                      row
                      style={{ paddingBottom: 20, justifyContent: "flex-end" }}
                    >
                      <Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 12 }}
                      >
                        {i18n.t('profile.viewAll')}
                      </Button>
                    </Block>
                    <Block style={{ paddingBottom: -HeaderHeight * 2 }}>
                      <Block row space="between" style={{ flexWrap: "wrap" }}>
                        {Images.Viewed.map((img, imgIndex) => (
                          <Image
                            source={{ uri: img }}
                            key={`viewed-${img}`}
                            resizeMode="cover"
                            style={styles.thumb}
                          />
                        ))}
                      </Block>
                    </Block>
                  </Block>
                </Block>
              </ScrollView>
            </ImageBackground>
          </Block>
          {/* */}
        </Block>
      );
    }
  }
  
  const styles = StyleSheet.create({
    profile: {
      marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
      flex: 1
    },
    profileContainer: {
      width: width,
      height: height,
      padding: 0,
      zIndex: 1
    },
    profileBackground: {
      width: width,
      height: height / 2
    },
    profileCard: {
      padding: theme.SIZES.BASE,
      marginHorizontal: theme.SIZES.BASE,
      marginTop: 65,
      borderTopLeftRadius: 6,
      borderTopRightRadius: 6,
      backgroundColor: theme.COLORS.WHITE,
      shadowColor: "black",
      shadowOffset: { width: 0, height: 0 },
      shadowRadius: 8,
      shadowOpacity: 0.2,
      zIndex: 2
    },
    info: {
      paddingHorizontal: 40
    },
    avatarContainer: {
      position: "relative",
      marginTop: -80
    },
    avatar: {
      width: 124,
      height: 124,
      borderRadius: 62,
      borderWidth: 0
    },
    nameInfo: {
      marginTop: 35
    },
    divider: {
      width: "90%",
      borderWidth: 1,
      borderColor: "#E9ECEF"
    },
    thumb: {
      borderRadius: 4,
      marginVertical: 4,
      alignSelf: "center",
      width: thumbMeasure,
      height: thumbMeasure
    }
  });
  
  export default Profile;
  