'use strict';
import React, { Component, } from 'react';
import { AppRegistry, Image, StyleSheet, Text, View, ListView, ScrollView, TouchableHighlight, TextInput, StatusBar, Dimensions,} from 'react-native';

var styleMultiply = {
 inputRectangel : 0.9,
 inputButton : 0.35,
 registerButton: 0.53,
 marginBetweenButton: 0.02
}


var LogoShape = React.createClass({
  render(){
    var {width, height} = Dimensions.get('window');
    var minDim = width < height? width : height;
    return (
      <View>
      <Image source={require('./images/cube_shvk.png')}
             style={[{width: minDim*0.63,
                      height: minDim*0.62},
                      styles.cube_shvk]}/>
                      </View>
    );
  }
});

var InputField = React.createClass({

  getDefaultProps(){
    return {
      autoCapitalize : 'none',
      placeholder : 'Ввод',
      onSubmitEditing : null,
      returnKeyType: 'done',
      refer: ''
    }
  },
  render(){
    var {width, height} = Dimensions.get('window');
    var minDim = width < height? width : height;
    alert(this.props.placeholder + this.props.refer)
    return (
      <View style={[styles.rectangel, {width: width*styleMultiply.inputRectangel}]}>
          <TextInput ref={this.props.refer}
                     style = {styles.inputField}
                     selectTextOnFocus={true}
                     autoCorrect={false}
                     autoCapitalize={this.props.autoCapitalize}
                     placeholder={this.props.placeholder}
                     onSubmitEditing={this.props.onSubmitEditing}
                     returnKeyType={this.props.returnKeyType}/>
      </View>
    );
  }
});

var MyButton = React.createClass({
  getDefaultProps(){
    var {width, height} = Dimensions.get('window');
    return {
      width : width*styleMultiply.inputButton,
      marginLeft: 0,
      marginRight: 0,
      text: 'Кнопка',
      onPress: null,
    }
  },
  render(){
    return (
      <TouchableHighlight style={[styles.inputButton,
                                  {width: this.props.width,
                                  marginLeft: this.props.marginLeft,
                                  marginRight: this.props.marginRight}]}
                          onPress={this.props.onPress}
                          activeOpacity={0.9}
                          underlayColor='#3BA67E'>
          <Text style={{color:'black', fontSize: 20}}> {this.props.text}</Text>
      </TouchableHighlight>
    )
  }
});

var MainScreen = React.createClass({
  getInitialState(){
    return ({
      registerForm : false,
      userName : '',
      password : '',
      contactInfo : '',
      }
    )
  },
  render(){
    if (this.state.registerForm){
      return this.renderRegisterForm();
    }
    else {
      return this.renderInputForm();
    }
  },
  renderRegisterForm(){
    var {width, height} = Dimensions.get('window');
    return (
      <View style={styles.container}>
          <StatusBar hidden={true}/>
          <Image source={require('./first_background.png')} style={styles.backgroundImage}>
              <LogoShape/>
              <InputField
                          autoCapitalize='words'
                          placeholder='Имя пользователя'
                          onSubmitEditing={this.acceptUsername}
                          returnKeyType='next'/>
              <InputField
                          placeholder='Пароль'
                          onSubmitEditing={this.acceptPassword}
                          returnKeyType='next'/>
              <InputField
                          placeholder='E-mail или телефон'
                          onSubmitEditing={this.acceptContactInfo}/>
              <MyButton marginLeft={16}
                        width={width*styleMultiply.inputRectangel}
                        text='Зарегистрироваться и войти'
                        onPress={this.registrationAndInputPressed}/>
          </Image>

      </View>
    )
  },

  renderInputForm(){
    var {width, height} = Dimensions.get('window');
    return (
      <View style={styles.container}>
          <StatusBar hidden={true}/>
          <Image  source={require('./images/first_background.png')} style={styles.backgroundImage}>
              <LogoShape/>
              <InputField
                          autoCapitalize='words'
                          placeholder='Имя пользователя'
                          onSubmitEditing={this.acceptUsername}
                          returnKeyType='next'/>
              <InputField refer='textInput'
                          placeholder='Пароль'
                          onSubmitEditing={this.acceptPassword}
                          returnKeyType='next'/>
              <View  style={{flexDirection: 'row'}}>
                  <MyButton marginLeft={16}
                            width={width*styleMultiply.inputButton}
                            text='Вход'
                            onPress={this.inputPressed}/>
                  <MyButton marginRight={16}
                            marginLeft={width*styleMultiply.marginBetweenButton}
                            width={width*styleMultiply.registerButton}
                            text='Регистрация'
                            onPress={()=>{this.setState((state) => {
                              return {
                                ...state,
                                registerForm: true,
                                };
                            })}}/>

              </View>
              <TextInput ref='extra' placeholder='extra field'></TextInput>
          </Image>

      </View>
    )
  },

  inputPressed(){
      alert(' Вход ' + this.state.userName + this.state.password + this.state.contactInfo);
  },

  registrationAndInputPressed(){
      alert('Зарегистрирован пользователь: ' + this.state.userName + this.state.password + this.state.contactInfo);
  },

  focusNextField(nextField) {
    this.refs.textInput.focus();
  },

  acceptUsername(event){
    var text = event.nativeEvent.text;
    this.setState((state) => {
      return {
        ...state,
        userName: text,
        };
    });
    this.focusNextField('2');
  },

  acceptPassword(event){
    var text = event.nativeEvent.text;
    this.setState((state) => {
      return {
        ...state,
        password: text,
        };
    });
    if (this.state.registerForm){
      this.focusNextField('3');
    }
  },

  acceptContactInfo(event){
    var text = event.nativeEvent.text;
    this.setState((state) => {
      return {
        ...state,
        contactInfo: text,
        };
    });
  }
});

const styles = StyleSheet.create({
  inputButton: {
    height : 40,
    borderRadius: 25,
    backgroundColor : '#37BD8A',
    elevation : 10,
    alignSelf : 'flex-start',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: 4,
    paddingRight: 4,
    marginBottom: 10,
    marginLeft: 16,
    marginRight: 16,
  },
  cube_shvk: {
    margin: 30,
    opacity: 0.77,
  },
  rectangel: {
    height : 40,
    borderRadius: 25,
    backgroundColor : 'white',
    elevation : 10,
    alignSelf : 'center',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginLeft: 16,
    marginRight: 16,
  },
  inputField: {
    fontSize : 20,
    marginLeft: 20,
    color: 'black',
    textAlignVertical: 'center',
  },
  backgroundImage:{
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent : 'flex-start',
    paddingTop: 36,
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#153D70',
  },
});

AppRegistry.registerComponent('AwesomeProject', () => MainScreen);