"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _iconsReact = require("@wfp/icons-react");

var _js = require("../../globals/js");

var _excluded = ["alt", "className", "children", "description", "ellipsis", "extendedDescription", "image", "showName", "small", "missingImage", "name"];
var prefix = _js.settings.prefix;
/** The User is used inside the MainNavigation and form, and can display an avatar and username. */

var User = function User(_ref) {
  var _classNames, _classNames2;

  var alt = _ref.alt,
      className = _ref.className,
      children = _ref.children,
      description = _ref.description,
      ellipsis = _ref.ellipsis,
      extendedDescription = _ref.extendedDescription,
      image = _ref.image,
      showName = _ref.showName,
      small = _ref.small,
      missingImage = _ref.missingImage,
      name = _ref.name,
      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var avatar;

  if (!image && missingImage === 'avatar') {
    avatar = /*#__PURE__*/_react.default.createElement(_iconsReact.User16, (0, _extends2.default)({
      fill: "#ffffff",
      width: "14",
      height: "14",
      description: alt,
      className: "".concat(prefix, "--user__icon ").concat(prefix, "--user__icon--empty")
    }, other));
  } else if (image === undefined && missingImage === 'letter') {
    avatar = /*#__PURE__*/_react.default.createElement("svg", {
      id: "Layer_1",
      className: "".concat(prefix, "--user__icon ").concat(prefix, "--user__icon--empty ").concat(prefix, "--user__icon--letter"),
      x: "0px",
      y: "0px",
      viewBox: "0 0 25 25",
      height: "25px",
      width: "25px"
    }, /*#__PURE__*/_react.default.createElement("text", {
      x: "50%",
      y: "57%",
      dominantBaseline: "middle",
      textAnchor: "middle"
    }, name && name.toUpperCase()[0]));
  } else {
    avatar = /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(prefix, "--user__icon")
    }, /*#__PURE__*/_react.default.createElement("img", {
      alt: alt,
      src: image
    }));
  }

  var classes = (0, _classnames.default)("".concat(prefix, "--user"), className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefix, "--user--has-description"), description), (0, _defineProperty2.default)(_classNames, "".concat(prefix, "--user--has-extended-description"), extendedDescription), _classNames));
  var titleClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefix, "--user__title"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefix, "--user__title--ellipsis"), ellipsis), (0, _defineProperty2.default)(_classNames2, "".concat(prefix, "--user__title--small"), small), _classNames2));
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: classes
  }, other), avatar, showName && /*#__PURE__*/_react.default.createElement("span", {
    className: titleClasses
  }, /*#__PURE__*/_react.default.createElement("span", null, name), description && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--user__description")
  }, description)), children, extendedDescription && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--user__extended-description")
  }, extendedDescription));
};

User.propTypes = {
  /**
   * The alt-text of the avatar
   */
  alt: _propTypes.default.string,

  /**
   * Sets the max-width of the user name to 130px and shows an ellipsis
   */
  ellipsis: _propTypes.default.bool,

  /**
   * Provide a custom className that is applied directly to the underlying
   * &lt;textarea&gt; node
   */
  className: _propTypes.default.string,

  /**
   * Additional description under the Name will also increase the size
   * of the Avatar use &lt;List kind="simple" small /&gt; as default content
   */
  description: _propTypes.default.node,

  /**
   * Selects the generated empty icon if no image is provided.
   * Can be `avatar` or `letter`.
   */
  missingImage: _propTypes.default.oneOf(['avatar', 'letter']),

  /**
   * Extended Description column
   */
  extendedDescription: _propTypes.default.node,

  /**
   * Url to an avatar image The size of the image is 25px * 25px.
   * Provide at least 50px * 50px to support HiDPI displays.
   */
  image: _propTypes.default.string,

  /**
   * Show the name next to the avatar
   */
  showName: _propTypes.default.bool,

  /**
   * The username which will be displayed. Usually `Firstname Lastname`.
   */
  name: _propTypes.default.string
};
User.defaultProps = {
  alt: 'User Icon',
  missingImage: 'avatar',
  ellipsis: false,
  showName: true
};
var _default = User;
exports.default = _default;