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

import t from 'tcomb-form-native'; // 0.6.9

var logo = require('../assets/download.jpg')


const Form = t.form.Form;

const User = t.struct({
  //email: t.String,
  username: t.String,
  password: t.String,
  //terms: t.Boolean
});

const formStyles = {
  ...Form.stylesheet,
  formGroup: {
    normal: {
      marginBottom: 10
    },
  },
  controlLabel: {
    normal: {
      color: 'blue',
      fontSize: 18,
      marginBottom: 7,
      fontWeight: '600'
    },
    // the style applied when a validation error occours
    error: {
      color: 'red',
      fontSize: 18,
      marginBottom: 7,
      fontWeight: '600'
    }
  }
}
//
// const options = {
//   fields: {
//     email: {
//       error: 'Without an email address how are you going to reset your password when you forget it?'
//     },
//     password: {
//       error: 'Choose something you use on a dozen other sites or something you won\'t remember'
//     },
//     terms: {
//       label: 'Agree to Terms',
//     },
//   },
//   stylesheet: formStyles,
// };

export default class App extends Component {
  handleSubmit = () => {
    const value = this._form.getValue();
    console.log('value: ', value);
  }

  render() {
    return (
      <View>
       <Image
         style={{width: 50, height: 50}}
          source={logo}
       />
       </View>
       <View style={styles.container}>
        <Form
          ref={c => this._form = c}
          type={User}
          //options={options}
        />
        <Button
          title="LOGIN"
          onPress={this.handleSubmit}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
});