import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native';
import { login } from '../redux/actions/auth';
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';

const awsCognitoSettings = {
    UserPoolId: 'some #',
    ClientId: 'some #'
};

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {
            page: 'Login',
            username: '',
            password: ''
        };
    }

    get alt () { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; }

    handleClick (e) {
        e.preventDefault();
        const userPool = new CognitoUserPool(awsCognitoSettings);

        // Sign up
        if (this.state.page === 'SignUp') {
            const attributeList = [
                new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
            ];
            userPool.signUp(
                this.state.username,
                this.state.password,
                attributeList,
                null,
                (err, result) => {
                    if (err) {
                        alert(err);
                        this.setState({ username: '', password: '' });
                        return;
                    }
                    console.log(`result = ${JSON.stringify(result)}`);
                    this.props.onLogin(this.state.username, this.state.password);
                }
            );
        } else {
            const authDetails = new AuthenticationDetails({
                Username: this.state.username,
                Password: this.state.password
            });
            const cognitoUser = new CognitoUser({
                Username: this.state.username,
                Pool: userPool
            });
            cognitoUser.authenticateUser(authDetails, {
                onSuccess: (result) => {
                    console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
                    this.props.onLogin(this.state.username, this.state.password);
                },
                onFailure: (err) => {
                    alert(err);
                    this.setState({ username: '', password: '' });
                    return;
                }
            });
        }
    }

    togglePage (e) {
        this.setState({ page: this.alt });
        e.preventDefault();
    }

    render() {
        return (
            <ScrollView style={{padding: 20}}>
                {/*<Text style={styles.title}>Welcome!</Text>*/}
                <TextInput
                    style={styles.pw}
                    placeholder=' Email Address'
                    autoCapitalize='none'
                    autoCorrect={false}
                    autoFocus={true}
                    keyboardType='email-address'
                    value={this.state.username}
                    onChangeText={(text) => this.setState({ username: text })} />

                <TextInput
                    style={styles.pw}
                    placeholder=' Password'
                    autoCapitalize='none'
                    autoCorrect={false}
                    secureTextEntry={true}
                    value={this.state.password}
                    onChangeText={(text) => this.setState({ password: text })} />

                <View style={{margin: 7}}/>
                    <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
                    <View style={{margin: 7, flexDirection: 'row', justifyContent: 'center'}}>

                        <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
                            {this.alt}
                        </Text>
                </View>

            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    title: {
        fontSize: 27,
        textAlign: 'center'
    },

    icon: {
        position: 'absolute'
    },

    pw: {
        paddingRight: 90,
        justifyContent: 'flex-end',
        marginBottom: 20,
        backgroundColor: '#9b42f4',
        height: 40,
        borderWidth: 1,
        borderRadius: 5
    },

    buttons: {
        fontFamily: 'AvenirNext-Heavy'
    }
});

const mapStateToProps = (state, ownProps) => {
    return {
        isLoggedIn: state.auth.isLoggedIn
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        onLogin: (username, password) => { dispatch(login(username, password)); }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, View, Button } from 'react-native';
import { logout } from '../redux/actions/auth';
import DropdownMenu from 'react-native-dropdown-menu';
import Icon from './Icon';

class Secured extends Component {
    userLogout(e) {
        this.props.onLogout();
        e.preventDefault();
    }

    render() {
        var data = [["Choice 1"], ["Choice 2"], ["Choice 3"], ["Choice 4"]];

        return(
            <ScrollView style={{padding: 20}}>
                <Icon/>

                <Text style={{fontSize: 27}}>
                    {`Welcome ${this.props.username}`}
                </Text>

                <View style={{flex: 1}}>

                    <DropdownMenu style={{flex: 1}}
                                  bgColor={"purple"}  //the background color of the head, default is grey
                                  tintColor={"white"} //the text color of the head, default is white
                                  selectItemColor={"orange"} //the text color of the selected item, default is red
                                  data={data}
                                  maxHeight={410}  // the max height of the menu
                                  handler={(selection, row) => alert(data[selection][row])} >

                        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} >
                        </View>
                    </DropdownMenu>

                </View>

                <View style={{margin: 20}}/>


                <Button onPress={(e) => this.userLogout(e)} title="Logout"/>

            </ScrollView>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        username: state.auth.username
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        onLogout: () => { dispatch(logout()); }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Secured);