import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import { observer } from 'mobx-react';
import {
  Form,
  Container,
  Header,
  Content,
  Button,
  Text,
  Item,
  Input,
  Label
} from 'native-base';

import Center from '../components/Center';
import AppStore from '../store/AppStore';

@observer
class LoginScreen extends Component {
  render() {
    const { login } = AppStore;

    return (
      <Container>
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Login:</Label>
              <Input onTextChange={(text) => {AppStore.set('login', text)}}/>
              <Text>{login}</Text>
            </Item>
            <Item floatingLabel last>
              <Label>Senha:</Label>
              <Input secureTextEntry={true}/>
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

export default createStackNavigator({
  Login: {
    screen: LoginScreen
  }
}, {
  headerMode: 'none'
});