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

import Logo from '../components/Logo';
import Form from '../components/From';

import { Actions } from 'react-native-router-flux';



export default class Login extends Component {
    signup() {
        Actions.signup()
    }
  render() {
      return(
        <View style={styles.container}>
          <Logo />
          <Form type="Login"/>
          <View style={styles.signupTextCont}>
              <Text style={styles.signUpText}>Don't have account yet? </Text>
              <TouchableOpacity onPress={this.signup}><Text style={styles.signBtn}>Signup</Text></TouchableOpacity>
          </View>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#455a64',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signupTextCont: {
    flexGrow: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginVertical: 16,
    flexDirection: 'row'
  },
  signUpText: {
    color: '#fff',
    fontSize: 16,

  },
  signBtn: {
      color: '#fff',
      fontSize: 16,
      fontWeight: 'bold',
  }
});