import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Button, Image, ScrollView, BackHandler, RefreshControl, TextInput, ActivityIndicator, PermissionsAndroid, Platform } from 'react-native';


export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      refreshing: false,

    }
  }


  componentDidMount = () => {



    fetch('https://tracessystem.com/apitraces/AA_open_user.php',
      {
        method: 'POST',
        headers:
        {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(
          {
            username: 'mikel@taysbakers.com',
            password: '123456'


          })
      })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          idusernya: responseJson[0].id_user,
          Namanya: responseJson[0].nama_lengkap,
          jobnya: responseJson[0].jobs_title,
          emailnya: responseJson[0].email,
          phonenya: responseJson[0].phone,
          companynya: responseJson[0].company,
          alamatnya: responseJson[0].alamat,
          countrynya: responseJson[0].country,
          telpnnya: responseJson[0].no_telpn,
          imagenya: responseJson[0].image,
        })

      })
      .catch((error) => {
        console.error(error);
      });

  }





  render() {
const namanyaya=this.state.Namanya
    return (
      <ScrollView>
        <View style={styles.MainContainer}>

            <View style={styles.bodyContent}>
    <Text>{namanyaya}</Text>
              <Text></Text>
              <Text></Text>

            </View>
          </View>

      </ScrollView>

    );

  }
}

const styles = StyleSheet.create({
  header: {
    backgroundColor: "black",
    height: 20,
  },


  avatar: {
    width: 150,
    height: 150,
    borderRadius: 80,
    borderWidth: 0.1,
    borderColor: "gray",
    marginBottom: 10,
    position: 'absolute',
    marginTop: -15,
    marginLeft: 150
  },

  body: {
    marginTop: 20,
  },

  MainContainer:
  {
    flex: 1,
    margin: 20,
    left: -30
  },

  centertext: {
    height: 50,
    textAlign: 'center',
    color: 'grey',
    fontSize: 30,
    width: '100%',
    borderColor: '#009688',
    backgroundColor: "#52c5d8",
    marginBottom: 10
  },
  centeringButtonDetail: {
    flex: 1,
    flexDirection: "row",
    justifyContent: 'center',
    alignItems: 'center',

  },
  uploadAvatar: {
    height: 100,
    width: 100,
    borderRadius: 10,
  },
  conPreview: {
    flex: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  containerImage: {

    backgroundColor: "#52c5d8",
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 45,
  },
  containerTakeFoto: {


    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 15,
  },

  Merge: { flexDirection: "row" },
  rowingdata: {

    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"

  },

  centeringButton: {
    justifyContent: 'center',
    alignItems: 'center',
  },

  TextInputStyleClass:
  {

    textAlign: 'center',
    height: 40,
    backgroundColor: "#fff",
    flexDirection: "row",
    //  borderWidth: 1,
    //  borderColor: '#009688',
    // borderRadius: 7,
    marginBottom: 10,
    width: '60%'
  },

  TouchableOpacityStyle:
  {
    backgroundColor: "#f78f20",
    // height: '30%',
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 40,
    borderRadius: 25,
    marginHorizontal: 10,



  },

  TouchableOpacityStyleProfile:
  {
    backgroundColor: "#f78f20",
    // height: '30%',
    justifyContent: 'center',
    alignItems: 'center',
    width: 200,
    height: 200,
    borderRadius: 100,
    marginHorizontal: 10,



  },
  TouchableTakeFoto:
  {

    // height: '30%',
    justifyContent: 'center',
    alignItems: 'center',



  },
  BoxCust:
  {
    textAlign: 'center',
    color: 'grey',
    fontSize: 30,
    borderWidth: 0.2,
    backgroundColor: "#fff",
    // height: '30%',
    justifyContent: 'center',
    alignItems: 'center',
    width: 320,
    height: 50,
    borderRadius: 17,
    position: 'absolute',
    top: 90,

  },

  TextStyle:
  {
    color: '#fff',
    textAlign: 'center',
    fontSize: 18
  },

  BorddererText:
  {
    color: 'grey',
    textAlign: 'left',
    fontSize: 18,
    marginRight: 10,
    marginLeft: 30,
    fontWeight: 'bold',
    flexDirection: "row"
  },

  ActivityIndicatorStyle: {

    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'

  }
});