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

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

/**
 * 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 {
  constructor(props) {
    super(props);
    this.handleClickLogin = this.handleClickLogin.bind(this);
    this.handleClickSignup = this.handleClickSignup.bind(this);
  }

  /**
   * Handles calling the onClickLogin and passes the default behaviour
   * into the onClickLogin callback as an argument.
   * To override or add behaviour, see onClickLogin prop.
   */
  handleClickLogin() {
    const { onClickLogin } = this.props;
    onClickLogin(() => navigateToUrl('/login'));
  }

  /**
   * Handles calling the onClickSignup and passes the default behaviour
   * into the onClickSignup callback as an argument.
   * To override or add behaviour, see onClickSignup prop.
   */
  handleClickSignup() {
    const { onClickSignup } = this.props;
    onClickSignup(() => navigateToUrl('/signup'));
  }

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

    const elementsArray = [];

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

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

HeaderWidget.propTypes = {
  /** Check if the user is logged in */
  isLoggedIn: PropTypes.bool.isRequired,

  /**
   * Callback executed when the user clicks on the "Login" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickLogin by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickLogin: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "Logout" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickLogout by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickLogout: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "Signup" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickSignup by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickSignup: PropTypes.func,

  /** User name coming from user object */
  username: PropTypes.string,

  /** User avatar coming from user object */
  userAvatar: PropTypes.string,

  /** If logged in user is admin of an organization */
  isOrgAdmin: PropTypes.bool,

  /** Menu Items passed into the UserMenu
   */
  userMenuItems: PropTypes.array,

  /** Hide Auth Dialog - defaults to false
   */
  shouldHideAuthDialog: PropTypes.bool,

  /** Defaults to linkDark */
  buttonVariant: PropTypes.oneOf(buttonVariants),

  /** Defaults to whiteWithBorder */
  loginSignupButtonsVariant: PropTypes.oneOf(buttonVariants),

  /** Do not display user's name - defaults to false */
  hideName: PropTypes.bool,

  /** Object for internationalization */
  intl: PropTypes.object,

  /** Show Sign Up Button - defaults to true */
  showSignUp: PropTypes.bool,
};

HeaderWidget.defaultProps = {
  onClickLogin: defaultBehaviour => defaultBehaviour(),
  onClickLogout: defaultBehaviour => defaultBehaviour(),
  onClickSignup: defaultBehaviour => defaultBehaviour(),
  username: null,
  userAvatar: null,
  isOrgAdmin: false,
  userMenuItems: [],
  shouldHideAuthDialog: false,
  buttonVariant: 'linkDark',
  loginSignupButtonsVariant: 'whiteWithBorder',
  hideName: false,
  intl: null,
  showSignUp: true,
};

export default HeaderWidget;