import React from 'react';
import PropTypes from 'prop-types';

import { messages as commonMessages } from '@doodle/common-messages';

import Button from '../../../../controls/Button/Button';
import ButtonLabel from '../../../../controls/Button/ButtonLabel';
import DefaultAvatar from '../../../../user/UserAvatar/default-avatar.svg';
import { userPropType, isLoggedIn } from '../../../../utils/user';
import { translate } from '../../../../utils/translate';
import navigateToUrl from '../../../../utils/helper';

const UserArea = ({ user, onClickLogin, onClickSignup, intl }) => {
  if (user && user.loading) {
    return null;
  }

  const showAvatar = isLoggedIn(user) && !user.error;

  /**
   * Handles calling the onClickLogin and passes the default behaviour
   * into the onClickLogin callback as an argument.
   * To override or add behaviour, see onClickLogin prop.
   */
  function handleClickLogin() {
    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.
   */
  function handleClickSignup() {
    onClickSignup(() => navigateToUrl('/signup'));
  }

  if (!showAvatar) {
    return (
      <div className="UserArea">
        <div className="UserArea-buttonRow">
          <Button
            onClick={handleClickSignup}
            dimension="compact"
            variant="whiteWithBorder"
            className="UserArea-signupButton"
          >
            <ButtonLabel>{translate(commonMessages.signup, intl)}</ButtonLabel>
          </Button>
          <Button
            onClick={handleClickLogin}
            dimension="compact"
            variant="whiteWithBorder"
            className="UserArea-loginButton"
          >
            <ButtonLabel>{translate(commonMessages.login, intl)}</ButtonLabel>
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="UserArea">
      <div className="UserArea-userRow">
        <div className="UserAvatar-avatar" style={{ backgroundImage: `url(${user.data.avatarSmallUrl})` }}>
          {!user.data.avatarSmallUrl && <DefaultAvatar />}
        </div>
        <div className="UserArea-userName">
          <div className="display-small">{user.data.name}</div>
          <div className="tiny--soft">{user.data.email}</div>
        </div>
      </div>
      {user.isEligibleForFreeTrial && (
        <Button href="/premium/business/info" variant="blue" dimension="small">
          {translate(commonMessages.startTrial, intl)}
        </Button>
      )}
    </div>
  );
};

UserArea.propTypes = {
  /** Defines the user and the shape of the data. */
  user: userPropType,

  /**
   * 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 "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,

  /** An object used for internationalization. */
  intl: PropTypes.object,
};

UserArea.defaultProps = {
  user: null,
  onClickLogin: defaultBehaviour => defaultBehaviour(),
  onClickSignup: defaultBehaviour => defaultBehaviour(),
  intl: null,
};

export default UserArea;