'use strict';

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { DeviceEventEmitter, Dimensions, Image, Text, AsyncStorage, TouchableOpacity } from 'react-native';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Container, Content, InputGroup, Input, Button, Icon, View } from 'native-base';
import { replaceRoute } from '../../actions/route';

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visibleHeight: Dimensions.get('window').height,
            scroll: false,
            user: null,
            username: null
        };
    }

    replaceRoute(route) {
        this.props.replaceRoute(route);
    }

    loginWithEmail() {

    }

    loginWithFacebook() {

    }

    loginWithGoogle() {

    }

    render() {
      var _this=this;
      return (
        <Image style={{flex: 1, width: null, height: null }} resizeMode={Image.resizeMode.stretch} source={require('../../../images/splash.png')}>
          <Grid>
            <Col style={{ flex: 10 }} />
            <Col style={{ flex: 80 }}>
              <Row style={{ flex: 30 }} />
              <Row style={{ flex: 8 }}>
                <Image style={{ flex: 1, width: null, height: null }} resizeMode={Image.resizeMode.stretch} source={require('../../../images/logo.png') } />
              </Row>
              <Row style={{ flex: 3 }} />
              <Row style={{ flex: 40 }}>
                <Image style={{ flex: 1, width: null, height: null }} resizeMode={Image.resizeMode.stretch} source={ require('../../../images/login_overlay.png') }>
                  <Grid>
                    <Col style={{ flex: 5 }} />
                    <Col style={{ flex: 90 }}>
                      <Row style={{ flex: 2 }} />
                      <Row style={{ flex: 15 }}>
                          <InputGroup style={{flex: 1, width: null}}>
                              <Icon name="ios-at" />
                              <Input
                                onChangeText={(text) => this.setState({ email: text })}
                                value={this.state.email}
                                controlled={true}
                                keyboardType="email-address"
                                placeholder="EMAIL"
                                placeholderTextColor="#555555" />
                          </InputGroup>
                      </Row>
                      <Row style={{ flex: 15 }}>
                          <InputGroup style={{flex: 1, width: null}}>
                              <Icon name="ios-key" />
                              <Input
                                onChangeText={(text) => this.setState({ password: text })}
                                value={this.state.password}
                                controlled={true}
                                placeholder="PASSWORD"
                                placeholderTextColor="#555555"
                                secureTextEntry={true}/>
                          </InputGroup>
                      </Row>
                      <Row style={{ flex: 5 }} />
                      <Row style={{ flex: 15 }}>
                          <Button block small success style={{flex: 1, width: null}} onPress={this.loginWithEmail.bind(this)}>
                            <Text style={{fontWeight: 'bold', color: 'white'}}>LOG IN</Text>
                          </Button>
                      </Row>

                      <Row style={{ flex: 5, justifyContent: 'center' }}>
                          <Text style={{fontWeight: 'bold', color: '#555555'}}> OR </Text>
                      </Row>
                      <Row style={{ flex: 15 }}>
                        <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent:'center'}}>
                          <View style={{flex: 15}} />
                          <TouchableOpacity style={{flex: 1, width: 40, height:40}} onPress={this.loginWithFacebook.bind(this)}>
                            <Image style={{width: 40, height: 40}} source={ require('../../../images/facebook.png') }/>
                          </TouchableOpacity>
                          <View style={{flex: 1}} />
                          <TouchableOpacity style={{flex: 1, width: 40, height:40}} onPress={this.loginWithGoogle.bind(this)}>
                            <Image style={{width: 40, height: 40}} source={ require('../../../images/google.png') }/>
                          </TouchableOpacity>
                          <View style={{flex: 14}} />
                        </View>
                      </Row>
                      <Row style={{ flex: 1 }} />
                    </Col>
                    <Col style={{ flex: 5 }} />
                  </Grid>
                </Image>
              </Row>
              <Row style={{ flex: 24 }} />
              <Row style={{ flexDirection: 'row', flex: 5 }}>
                <View style={{ flex: 1 }}/>
                <TouchableOpacity onPress={() => this.replaceRoute('register')}>
                  <Text style={{fontWeight: 'bold', color: '#FFFFFF'}}>REGISTER</Text>
                </TouchableOpacity>
                <View style={{ flex: 20 }}/>
                <TouchableOpacity onPress={() => this.replaceRoute('welcome')}>
                  <Text style={{fontWeight: 'bold', color: '#FFFFFF'}}>LATER</Text>
                </TouchableOpacity>
                <View style={{ flex: 1 }}/>
              </Row>
              <Row style={{ flex:1 }} />
            </Col>
            <Col style={{ flex: 10 }} />
          </Grid>
        </Image>
      );
    }
}



function bindActions(dispatch){
    return {
        replaceRoute:(route)=>dispatch(replaceRoute(route))
    }
}

export default connect(null, bindActions)(Login);