text: import React, { useState, useRef, useEffect } from 'react';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import { useDispatch, useSelector } from 'react-redux';
  
  import { updateProfileRequest } from '~/store/modules/user/actions';
  import { signOut } from '~/store/modules/auth/actions';
  
  import {
    Container,
    Title,
    Form,
    FormInput,
    SubmitButton,
    Separator,
    LogoutButton,
  } from './styles';
  import Background from '~/components/Background';
  
  function Profile() {
    const emailRef = useRef();
    const oldPasswordRef = useRef();
    const passwordRef = useRef();
    const confirmPasswordRef = useRef();
  
    const dispatch = useDispatch();
    const profile = useSelector((state) => state.user.profile);
  
    const [name, setName] = useState(profile.name);
    const [email, setEmail] = useState(profile.email);
    const [oldPassword, setOldPassword] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
  
    function handleSubmit() {
      dispatch(
        updateProfileRequest({
          name,
          email,
          oldPassword,
          password,
          confirmPassword,
        })
      );
    }
  
    useEffect(() => {
      setOldPassword('');
      setPassword('');
      setConfirmPassword('');
    }, [profile]);
  
    function handleLogout() {
      dispatch(signOut());
    }
  
    return (
      <Background>
        <Container>
          <Title>Meu perfil</Title>
  
          <Form>
            <FormInput
              icon="person-outline"
              autoCorrect={false}
              autoCapitalize="none"
              placeholder="Nome completo"
              returnKeyType="next"
              onSubmitEditing={() => emailRef.current.focus()}
              value={name}
              onChangeText={setName}
            />
            <FormInput
              icon="mail-outline"
              placeholder="Digite seu e-mail"
              keyboardType="email-address"
              autoCorrect={false}
              autoCapitalize="none"
              ref={emailRef}
              returnKeyType="next"
              onSubmitEditing={() => oldPasswordRef.current.focus()}
              value={email}
              onChangeText={setEmail}
            />
  
            <Separator />
  
            <FormInput
              icon="lock-outline"
              placeholder="Sua senha atual"
              secureTextEntry
              ref={oldPasswordRef}
              returnKeyType="next"
              onSubmitEditing={() => passwordRef.current.focus()}
              value={oldPassword}
              onChangeText={setOldPassword}
            />
            <FormInput
              icon="lock-outline"
              placeholder="Sua nova senha"
              secureTextEntry
              ref={passwordRef}
              returnKeyType="next"
              onSubmitEditing={() => confirmPasswordRef.current.focus()}
              value={password}
              onChangeText={setPassword}
            />
            <FormInput
              icon="lock-outline"
              placeholder="Confirmação de senha"
              secureTextEntry
              ref={confirmPasswordRef}
              returnKeyType="send"
              onSubmitEditing={handleSubmit}
              value={confirmPassword}
              onChangeText={setConfirmPassword}
            />
            <SubmitButton onPress={handleSubmit}>Atualizar perfil</SubmitButton>
            <LogoutButton onPress={() => handleLogout()}>
              Sair do GoBarber
            </LogoutButton>
          </Form>
        </Container>
      </Background>
    );
  }
  
  Profile.navigationOptions = {
    tabBarLabel: 'Meu perfil',
    tabBarIcon: ({ tintColor }) => (
      <Icon name="person" size={20} color={tintColor} />
    ),
  };
  
  export default Profile;
  