import React from 'react';
import {Alert} from 'react-native'
import { AppLoading } from 'expo';
import { Container, Header, Content, Form, Item, Input, Label, Button, Icon, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
    this.state = {username: '', password: ''};
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }


  Loguearme = () => {

    if(this.state.username == "wilmerap" && this.state.password == "945637"){
      Alert.alert("Usuario y contraseña Correctos");

    }else{

      Alert.alert("Datos Incorrectos");

    }
  }


  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }
    let {username} = this.state
    let {password} = this.state
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input onChangeText={(username) => this.setState({username})}/>
            </Item>
            <Item floatingLabel last>
              <Label>Password</Label>
              <Input onChangeText={(password) => this.setState({password})}/>
            </Item>

            <Button rounded success onPress={this.Loguearme} style={{ height: 40, marginTop : 40 }}>
            <Icon type="FontAwesome" name="home" style={{ color: '#ED4A6A' }}/>
            <Text >Loguearme</Text>
            </Button>

          </Form>
        </Content>
      </Container>
    );
  }
}