text: /* eslint-disable react/static-property-placement */
  /* eslint-disable no-undef */
  /* eslint-disable react/sort-comp */
  // eslint-disable-next-line no-undef
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { Keyboard, ActivityIndicator } from 'react-native';
  import AsyncStorage from '@react-native-community/async-storage';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import api from '../../services/api';
  
  import {
    Container,
    Form,
    Input,
    SubmitButton,
    List,
    User,
    Avatar,
    Name,
    Bio,
    ProfileButton,
    ProfileButtonText,
  } from './styles';
  
  export default class Main extends Component {
    static navigationOptions = {
      title: 'Usuários',
    };
  
    static propTypes = {
      navigation: Proptypes.shape({
        navigate: Proptypes.func,
      }).isRequired,
    };
  
    constructor() {
      super();
  
      state = {
        newUser: '',
        users: [],
        loading: false,
      };
    }
  
    async componentDidMount() {
      console.tron.log(this.props);
      const users = await AsyncStorage.getItem('users');
  
      if (users) {
        this.setState({ users: JSON.parse(users) });
      }
    }
  
    async componentDidUpdate(_, prevState) {
      const { users } = this.state;
      if (prevState.user !== users) {
        AsyncStorage.setItem('users', JSON.stringify(users));
      }
    }
  
    handleAddUser = async () => {
      const { users, newUser } = this.state;
  
      this.setState({ loading: true });
  
      const response = await api.get(`/users/${newUser}`);
  
      const data = {
        name: response.data.name,
        login: response.data.login,
        bio: response.data.bio,
        avatar: response.data.avatar_url,
      };
  
      this.setState({
        users: [...users, data],
        newUser: '',
        loading: false,
      });
  
      Keyboard.dismiss();
    };
  
    handleNavigate = user => {
      const { navigation } = this.props;
  
      navigation.navigate('User', { user });
    };
  
    render() {
      const { users, newUser, loading } = this.state;
  
      return (
        <Container>
          <Form>
            <Input
              autoCorrect={false}
              autoCapitalize="none"
              placeholder="Adicionar usuário"
              value={newUser}
              onChangeText={text => this.setState({ newUser: text })}
              returnKeyType="send"
              onSubmitEditing={this.handleAddUser}
            />
            <SubmitButton loading={loading} onPress={this.handleAddUser}>
              {loading ? (
                <ActivityIndicator color="#FFF" />
              ) : (
                <Icon name="add" size={20} color="#FFF" />
              )}
            </SubmitButton>
          </Form>
  
          <List
            data={users}
            keyExtractor={user => user.login}
            renderItem={({ item }) => (
              <User>
                <Avatar source={{ uri: item.avatar }} />
                <Name>{item.name}</Name>
                <Bio>{item.bio}</Bio>
  
                <ProfileButton onPress={() => this.handleNavigate(item)}>
                  <ProfileButtonText>Visualizar perfil</ProfileButtonText>
                </ProfileButton>
              </User>
            )}
          />
        </Container>
      );
    }
  }
  