import React, { Component } from 'react';
import PropTypes from 'prop-types';
import commonMessages from '@doodle/common-messages';

import UserMenu from '../UserMenu';
import Button, { buttonVariants } from '../../controls/Button/Button';
import { translate } from '../../utils/translate';

/**
 * The HeaderWidget (or user area), is a component representing the current user
 * state. It changes appearance depending on whether there's a logged-in user or
 * not. If a user is logged in, it displays the `UserMenu` for that user. If no
 * user is logged in, it displays a sign up and a log in button.
 *
 * It's an independent component that can be used anywhere but is mainly
 * intended to be placed inside an instance of the `Header` component (usually
 * on the right-hand side).
 *
 * This previously lived in the lib-users-api-connector but was moved here.
 */
class HeaderWidget extends Component {
  static propTypes = {
    isLoggedIn: PropTypes.bool.isRequired,
    /** Will override default '/login' href if specified. */
    onClickLogin: PropTypes.func,
    /** Will override default '/logout' href if specified. */
    onClickLogout: PropTypes.func,
    /** Will override default '/signup' href if specified. */
    onClickSignup: PropTypes.func,
    username: PropTypes.string,
    userAvatar: PropTypes.string,
    userMenuItems: PropTypes.array,
    shouldHideAuthDialog: PropTypes.bool,
    buttonVariant: PropTypes.oneOf(buttonVariants),
    loginSignupButtonsVariant: PropTypes.oneOf(buttonVariants),
    hideName: PropTypes.bool,
    intl: PropTypes.object,
  };

  static defaultProps = {
    onClickLogin: null,
    onClickLogout: null,
    onClickSignup: null,
    username: null,
    userAvatar: null,
    userMenuItems: [],
    shouldHideAuthDialog: false,
    buttonVariant: 'linkDark',
    loginSignupButtonsVariant: 'whiteWithBorder',
    hideName: false,
    intl: null,
  };

  render() {
    const {
      isLoggedIn,
      onClickLogin,
      onClickLogout,
      onClickSignup,
      username,
      userAvatar,
      userMenuItems,
      shouldHideAuthDialog,
      buttonVariant,
      loginSignupButtonsVariant,
      hideName,
      intl,
    } = this.props;

    const elementsArray = [];

    if (isLoggedIn) {
      elementsArray.push(
        <UserMenu
          key="user-menu"
          name={hideName ? null : username}
          avatar={userAvatar}
          onClickLogout={onClickLogout}
          customItems={userMenuItems}
          variant={buttonVariant}
        />
      );
    } else if (!shouldHideAuthDialog) {
      elementsArray.push(
        <Button
          className="HeaderWidget-signupButton u-padRight"
          variant={loginSignupButtonsVariant}
          dimension="compact"
          href={onClickSignup ? null : '/signup'}
          onClick={onClickSignup}
          key="signup-button"
        >
          {translate(commonMessages.signup, intl)}
        </Button>,
        <Button
          className="HeaderWidget-loginButton"
          variant={loginSignupButtonsVariant}
          dimension="compact"
          href={onClickLogin ? null : '/login'}
          onClick={onClickLogin}
          key="login-button"
        >
          {translate(commonMessages.login, intl)}
        </Button>
      );
    }

    return <div className="HeaderWidget">{elementsArray}</div>;
  }
}

export default HeaderWidget;