content: import React, { Component } from 'react';
  import { View, Text, ScrollView, AsyncStorage } from 'react-native';
  import { Avatar, Card, FormLabel, FormInput, Icon } from "react-native-elements";
  import { Actions } from "react-native-router-flux";
  
  import styles from './style';
  import getLocalhost from "../../../server";
  
  const localhost = getLocalhost();
  
  export default class Profile extends Component {
    constructor(props) {
      super(props)
      this.state = {
        profile: [],
        user: [],
        updateUser: {
          email: null,
          telephone: null,
          password: null
        },
        editable: false
      }
    }
  
    componentDidMount() {
      AsyncStorage.getItem("tukangs")
        .then(data => this.setState({ user: JSON.parse(data).user }))
        .catch(err => console.error(err));
    }
  
    onUpdateProfile = () => {
      const { user, updateUser } = this.state;
      const data = {
        "id": user.id,
        "name": user.name,
        "gender": user.gender,
        "username": user.username,
        "email": updateUser.email === undefined ? user.email : updateUser.email,
        "password": updateUser.password === undefined ? user.password : updateUser.password,
        "avatar": user.avatar,
        "Telephone": updateUser.telephone === undefined ? user.Telephone : updateUser.telephone,
        "user_status": user.user_status,
        "address": user.address
      }
  
      fetch(`${localhost}/users/${user.id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => this.setState({ editable: false }))
        .catch(err => console.error(err))
    }
  
    onButtonEdit = () => {
      if(!this.state.editable){
        return <Icon name="edit" type="font-awesome" color="#fff" onPress={() => this.setState({ editable: true })} />
      } else {
        return <Icon name="save" type="font-awesome" color="#fff" onPress={() => this.onUpdateProfile()} />;
      }
    }
  
    onButtonLogout = () => {
      AsyncStorage.removeItem()
      Actions.login({ type: "reset" })
    }
  
    render() {
      return (
        <View style={styles.container}>
          <View style={styles.headerContainer}>
            <Avatar
              xlarge
              rounded
              source={{uri: this.state.user.avatar}}
              activeOpacity={0.7}
              containerStyle={styles.avatarStyle}
            />
            <View style={styles.bottomHeader}>
              {this.onButtonEdit()}
              <Text style={styles.name}>{this.state.user.name}</Text>
              <Icon name="log-out" type="entypo" color="#fff" onPress={() => this.onButtonLogout()} />
            </View>
          </View>
          <View style={styles.content}>
            <ScrollView>
              <View>
                <Card>
                  <FormLabel labelStyle={styles.label}>Email</FormLabel>
                  <FormInput
                    editable={this.state.editable}
                    defaultValue={this.state.user.email}
                    inputStyle={[styles.text, {left: 0}]}
                    onChangeText={(text) => this.setState({
                      updateUser: {
                        email: text
                      }
                    })}
                  />
                  <FormLabel labelStyle={styles.label}>Telephone</FormLabel>
                  <FormInput
                    editable={this.state.editable}
                    defaultValue={`${this.state.user.Telephone}`}
                    inputStyle={[styles.text, {left: 0}]}
                    onChangeText={(text) => this.setState({
                      updateUser: {
                        telephone: text
                      }
                    })}
                  />
                  <FormLabel labelStyle={styles.label}>Password</FormLabel>
                  <FormInput
                    editable={this.state.editable}
                    defaultValue={`${this.state.user.password}`}
                    secureTextEntry
                    inputStyle={[styles.text, {left: 0}]}
                    onChangeText={(text) => this.setState({
                      updateUser: {
                        password: text
                      }
                    })}
                  />
                  <FormLabel labelStyle={styles.label}>Gender</FormLabel>
                  <Text style={styles.text}>{this.state.user.gender}</Text>
                </Card>
                <Card>
                  <FormLabel>HOME</FormLabel>
                  <Text style={styles.text}>{this.state.user.address}</Text>
                </Card>
              </View>
            </ScrollView>
          </View>
        </View>
      );
    }
  };
  