import React from 'react';
import styles from './styles.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import t from 'coral-framework/services/i18n';
import {logout} from 'coral-embed-stream/src/actions/auth';

const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
  <div>
    {
      loggedIn ? (
        <div className={`${styles.userBox} talk-stream-auth-userbox`}>
          <span className={styles.userBoxLoggedIn}>{t('sign_in.logged_in_as')}</span>
          <a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
          <a className={`${styles.logout} talk-stream-userbox-logout`} onClick={() => logout()}>
            {t('sign_in.logout')}
          </a>
        </div>
      ) : null
    }
  </div>
);

const mapStateToProps = ({auth}) => ({
  loggedIn: auth.loggedIn,
  user: auth.user
});

const mapDispatchToProps = (dispatch) =>
  bindActionCreators({logout}, dispatch);

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