import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Container, Content, Button , Form, Item, Input,Label, Icon} from 'native-base';


export default class LoginScreen extends Component {

  constructor(props){
    super(props)
    this.state = {
        count: 0,
        username: '',
        password: '',
        u_url:  '',

    };

  }
  const LoginScreen = (props)  => {
  const { navigate } = props.navigation;
  render() {

    return (
      <Container style={{padding: 13}}>
          <Content>
          <Form>

                                  <Item floatingLabel>
                                  <Icon active name='ios-contact-outline'/>
                                  <Label>   UserName</Label>
                                  <Input onChangeText={(username) => this.setState({username})}
                                  />
                                  </Item>
                                  <Item floatingLabel>
                                  <Icon active name='ios-lock-outline' />
                                  <Label>   PassWord</Label>
                                  <Input onChangeText={(password) => this.setState({password})}  />
                                  </Item>
                                  <Item floatingLabel>
                                  <Icon active name='ios-link' />
                                  <Label>  URL (Vtiger)</Label>
                                  <Input onChangeText={(u_url) => this.setState({u_url})}  />
                                  </Item>
                                  </Form>
                                  <Text>{"\n"}{"\n"}</Text>

                                  <Button block info onPress={() => navigate('App')} ><Text style={{fontSize: 23}}> Log In </Text></Button>



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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  centerBTN: {
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

LoginScreen.navigationOptions = {
    title: 'Login Screen',
};