import React, { Component } from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { signInRequest } from './../../actions/auth/signIn'
import { signUpRequest } from './../../actions/auth/signUp'

import { auth } from '../../firebase_config'

class AuthPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { isFetching, error, user } = this.props.auth;
        const { signInRequest } = this.props; 

        console.log("<AuthPage> - props", this.props);

        return (
            <div className="auth-page">
                <button onClick={signInRequest} disabled={user ? true : false}>Auth</button>
                <h2>{isFetching ? 'wait a moment...' : error ? 'Looks like we\'ve in trouble...' : user && user.displayName}</h2>
            </div>
        )
    }
}

const
    mapStateToProps = state => ({
        auth: {
            ...state.signIn
        }
    }),
    mapDispatchToProps = dispatch => bindActionCreators({ 
        signInRequest,
        signUpRequest 
    }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(AuthPage)