content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import merge from 'deep-assign';
  import { Button, Container, Content, Form, Item, Text, View } from 'native-base';
  import { ListRightArrowIcon, LocationIcon } from '~/components/Icons/';
  import resizeImageUriToBase64 from '~/lib/RN/resizeImageUriToBase64';
  import Paper from '~/components/Paper/';
  import ImagePicker from '~/components/ImagePicker';
  import FormSimpleField from '~/components/Form/SimpleField';
  import Wrapper from '~/components/Wrapper/';
  import UserAvatar from '~/components/UserAvatar';
  import { logout } from '~/services/account/';
  import { setFieldsValues, setFieldValue, resetForm } from './services/form';
  import { updateProfileInfos } from './services/update';
  import styles from './styles';
  
  class AccountEditionScene extends Component {
    componentWillMount() {
      if (this.props.resetForm) {
        resetForm();
      }
    }
  
    handleFieldChange = (field, value) => {
      setFieldValue({ field, value });
    }
  
    logout = async () => {
      await logout();
      this.props.navigation.navigate('Sales');
    }
  
    setProfilepic = async ({ uri, width, height }) => {
      const size = 256;
  
      const options = {
        offset: { x: 0, y: 0 },
        size: { width, height },
        displaySize: { width: size, height: size },
        resizeMode: 'cover',
      }
      const base64 = await resizeImageUriToBase64(uri, options);
      setFieldsValues({
        profilepic: { base64, width: size, height: size },
      });
    }
  
    renderForm() {
      return (
        <Form>
          {this.props.formError ? <Text note style={styles.fieldError}>{this.props.formError}</Text> : null}
  
          <Paper>
            <Wrapper size="small">
              <View style={styles.userWrapper}>
                <View style={styles.userWrapperLeft}>
                  {this.props.profilepic ? (
                    <ImagePicker onChange={this.setProfilepic} base64>
                      <UserAvatar uri={this.props.profilepic.base64} />
                    </ImagePicker>
                  ) : null}
                </View>
  
                <View style={styles.userWrapperRight}>
                  <FormSimpleField
                    error={this.props.firstnameError}
                    label="Your first name"
                    value={this.props.firstname}
                    onChangeText={(value) => this.handleFieldChange('firstname', value)}
                  />
                  <FormSimpleField
                    error={this.props.lastnameError}
                    label="Your last name"
                    value={this.props.lastname}
                    onChangeText={(value) => this.handleFieldChange('lastname', value)}
                  />
  
                </View>
              </View>
            </Wrapper>
          </Paper>
  
          <Text style={styles.sectionTitle}>Your address</Text>
  
          <Paper>
            <Wrapper size="small">
              <Item bordered>
                <LocationIcon active />
  
                <Text
                  style={[styles.address, (this.props.address ? {} : styles.addressEmpty )]}
                  onPress={() => this.props.navigation.navigate('AccountEditionPlace')}
                >{this.props.address || 'Your address'}</Text>
  
                <ListRightArrowIcon
                  onPress={() => {
                    this.props.navigation.navigate('AccountEditionPlace');
                    return false;
                  }}
                />
              </Item>
            </Wrapper>
          </Paper>
        </Form>
      );
    }
  
    render() {
      return (
        <Container>
          <Content>
            {this.renderForm()}
            <Button block danger onPress={this.logout}>
              <Text>Logout</Text>
            </Button>
          </Content>
        </Container>
      )
    }
  }
  
  AccountEditionScene.propTypes = {
    navigation: PropTypes.any.isRequired,
    profilepic: PropTypes.object.isRequired,
    firstname: PropTypes.string.isRequired,
    firstnameError: PropTypes.string.isRequired,
    lastname: PropTypes.string.isRequired,
    lastnameError: PropTypes.string.isRequired,
    formError: PropTypes.string.isRequired,
    resetForm: PropTypes.bool,
  
    address: PropTypes.string,
    addressGeo: PropTypes.object,
  }
  
  AccountEditionScene.defaultProps = {
    address: '',
    addressGeo: null,
    resetForm: true,
  }
  
  AccountEditionScene.navigationOptions = ({ navigation, navigationOptions }) => {
    return merge({}, (navigationOptions || {}), {
      title: 'Edit your profile',
      headerRight: (
        <Button onPress={() => updateProfileInfos(navigation).then((succeed) => {
          if (succeed) navigation.goBack()
        })}>
          <Text>Save</Text>
        </Button>
      ),
    })
  }
  
  const mapStateToProps = ({
    scenes: { accountEdition },
    services: { account: { address, addressGeo }}
  }) => {
    return {
      ...accountEdition,
      address,
      addressGeo,
    };
  };
  
  export default connect(mapStateToProps)(AccountEditionScene);
  