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

import 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';

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

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

  if (!showAvatar) {
    return (
      <div className="UserArea">
        <div className="UserArea-buttonRow">
          <Button
            href={onClickSignup ? null : '/signup'}
            onClick={onClickSignup}
            dimension="compact"
            variant="whiteWithBorder"
            className="UserArea-signupButton"
          >
            <ButtonLabel>{translate(commonMessages.signup, intl)}</ButtonLabel>
          </Button>
          <Button
            href={onClickLogin ? null : '/login'}
            onClick={onClickLogin}
            dimension="compact"
            variant="whiteWithBorder"
          >
            <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="compact">
          {translate(commonMessages.startTrial, intl)}
        </Button>
      )}
    </div>
  );
};

UserArea.propTypes = {
  user: userPropType,
  /** Will override default '/login' href if specified. */
  onClickLogin: PropTypes.func,
  /** Will override default '/signup' href if specified. */
  onClickSignup: PropTypes.func,
  intl: PropTypes.object,
};

UserArea.defaultProps = {
  user: null,
  onClickLogin: null,
  onClickSignup: null,
  intl: null,
};

export default UserArea;