import UserMenu from 'app/components/user-menu';
import { IAppState } from 'app/typings';
import * as React from 'react';
import { connect } from 'react-redux';
import { AnyAction, bindActionCreators, Dispatch } from 'redux';
import { execLoginAction, execLogoutAction } from '../actions';
import selectors from '../selectors';
import { IAuthDispatchProps, IAuthPopupProps } from '../typings';
import LoginForm from './login-form';

class Auth extends React.Component<IAuthPopupProps & IAuthDispatchProps> {
    render () {
        const auth = this.props.auth;

        if (!auth.authenticated) {
            return <LoginForm auth={ this.props.auth } login={ this.props.login } />;
        }

        const userDisplayName = auth.firstname + ' ' + auth.lastname;

        return <UserMenu currentUser={ userDisplayName } logoutButtonClick={ this.props.logoutButtonClick } />;
    }
}

const mapStateToProps = (state: IAppState): IAuthPopupProps => ({ auth: selectors.getAuth(state) });

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>): IAuthDispatchProps => (
    bindActionCreators({ login: execLoginAction, logoutButtonClick: execLogoutAction }, dispatch)
);

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