"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _commonMessages = require("@doodle/common-messages");

var _Button = _interopRequireDefault(require("../../../../controls/Button/Button"));

var _ButtonLabel = _interopRequireDefault(require("../../../../controls/Button/ButtonLabel"));

var _user = require("../../../../utils/user");

var _translate = require("../../../../utils/translate");

var _helper = _interopRequireDefault(require("../../../../utils/helper"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var DefaultAvatar = function DefaultAvatar(props) {
  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z",
    fill: "currentColor"
  }));
};

DefaultAvatar.defaultProps = {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24"
};

var UserArea = function UserArea(_ref) {
  var user = _ref.user,
      onClickLogin = _ref.onClickLogin,
      onClickSignup = _ref.onClickSignup,
      intl = _ref.intl;

  if (user && user.loading) {
    return null;
  }

  var showAvatar = (0, _user.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(function () {
      return (0, _helper["default"])('/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(function () {
      return (0, _helper["default"])('/signup');
    });
  }

  if (!showAvatar) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "UserArea"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "UserArea-buttonRow"
    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      onClick: handleClickSignup,
      dimension: "compact",
      variant: "whiteWithBorder",
      className: "UserArea-signupButton"
    }, /*#__PURE__*/_react["default"].createElement(_ButtonLabel["default"], null, (0, _translate.translate)(_commonMessages.messages.signup, intl))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      onClick: handleClickLogin,
      dimension: "compact",
      variant: "whiteWithBorder",
      className: "UserArea-loginButton"
    }, /*#__PURE__*/_react["default"].createElement(_ButtonLabel["default"], null, (0, _translate.translate)(_commonMessages.messages.login, intl)))));
  }

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "UserArea"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "UserArea-userRow"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "UserAvatar-avatar",
    style: {
      backgroundImage: "url(".concat(user.data.avatarSmallUrl, ")")
    }
  }, !user.data.avatarSmallUrl && /*#__PURE__*/_react["default"].createElement(DefaultAvatar, null)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "UserArea-userName"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "display-small"
  }, user.data.name), /*#__PURE__*/_react["default"].createElement("div", {
    className: "tiny--soft"
  }, user.data.email))), user.isEligibleForFreeTrial && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    href: "/premium/business/info",
    variant: "blue",
    dimension: "small"
  }, (0, _translate.translate)(_commonMessages.messages.startTrial, intl)));
};

UserArea.propTypes = {
  /** Defines the user and the shape of the data. */
  user: _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["default"].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["default"].func,

  /** An object used for internationalization. */
  intl: _propTypes["default"].object
};
UserArea.defaultProps = {
  user: null,
  onClickLogin: function onClickLogin(defaultBehaviour) {
    return defaultBehaviour();
  },
  onClickSignup: function onClickSignup(defaultBehaviour) {
    return defaultBehaviour();
  },
  intl: null
};
var _default = UserArea;
exports["default"] = _default;