import PropTypes from 'prop-types'
import React from 'react'
import GoogleLogin from 'react-google-login'
import { connect } from 'react-redux'
import { logIn } from '../../actions/auth'
import config from '../../config'

class LoginContainer extends React.Component {
    static propTypes = {
        visible: PropTypes.bool.isRequired,
        onLogin: PropTypes.func.isRequired,
    }

    onAuthResponse(response) {
        this.props.onLogin({
            email: response.getBasicProfile().getEmail(),
            givenName: response.getBasicProfile().getGivenName(),
            familyName: response.getBasicProfile().getFamilyName(),
            googleId: response.googleId,
            authToken: response.getAuthResponse().id_token,
            expiresAt: response.getAuthResponse().expires_at,
        })
    }

    onAuthFailure(error) {
        console.error(error)
    }

    render() {
        if (!this.props.visible) {
            return <span />
        }

        return (
            <GoogleLogin
                clientId={config['OAUTH_CLIENT_ID']}
                onSuccess={this.onAuthResponse.bind(this)}
                onFailure={this.onAuthFailure.bind(this)}
                render={(renderProps) => (
                    <span onClick={renderProps.onClick} className="login btn btn-primary">
                        <span className="fa fa-google" /> Login with Google
                    </span>
                )}
            />
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        visible: ownProps.visible,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onLogin: (payload) => dispatch(logIn(payload)),
    }
}

const Login = connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

export default Login