"use strict";

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

exports.__esModule = true;
exports.Avatar = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

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

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

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _broken = _interopRequireDefault(require("./broken"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _contrast = _interopRequireDefault(require("../../utils/contrast"));

var _randomColor = _interopRequireDefault(require("../../utils/randomColor"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Generated with util/create-component.js
const WuiAvatar = props => {
  const theme = (0, _useTheme.default)();
  const {
    src,
    alt,
    groupShape = null,
    brokenSrc = null,
    imageProps = null,
    wrapperProps = null,
    href = null,
    groupXS = "medium",
    groupSM = null,
    groupMD = null,
    groupLG = null,
    groupXL = null,
    icon,
    bordered,
    borderColor = theme.palette.background,
    groupBackgroundColor = null,
    textColor = null,
    clickable = false,
    className = null,
    ...otherProps
  } = props; // shape for the button or group of buttons

  const shape = props.shape ? props.shape : groupShape ? groupShape : "round"; // Component definition

  const Component = href ? "a" : "div"; // Size definitions

  const xs = props.xs ? props.xs : groupXS ? groupXS : "medium";
  const sm = props.sm ? props.sm : groupSM ? groupSM : null;
  const md = props.md ? props.md : groupMD ? groupMD : null;
  const lg = props.lg ? props.lg : groupLG ? groupLG : null;
  const xl = props.xl ? props.xl : groupXL ? groupXL : null;
  const backgroundColor = (0, _react.useMemo)(() => {
    return props.backgroundColor ? props.backgroundColor : groupBackgroundColor ? groupBackgroundColor : (0, _randomColor.default)();
  }, [props.backgroundColor, groupBackgroundColor]);
  const handleBackgroundColor = (0, _react.useMemo)(() => {
    return `background: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;
  }, [backgroundColor, backgroundColor, theme.palette]);

  function handleClickable() {
    if (href || clickable) {
      return `cursor: pointer;`;
    } else {
      return "";
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 50%;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleBorderColor() {
    if (!bordered) return "border: none;";
    if (borderColor) return `border: solid 1px ${borderColor};`; // if value is defined by props

    return `border: solid 1px: ${(0, _contrast.default)((0, _isThemePalette.default)(borderColor) ? theme.palette[borderColor][500] : borderColor)};`;
  }

  function handleTextColor() {
    if (textColor) return `color: ${textColor};`; // if value is defined by props

    return `color: ${(0, _contrast.default)((0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor)};`;
  }

  function handleSize(breakpoint) {
    if (!breakpoint) return "";

    switch (breakpoint) {
      case "mini":
        return "width: 20px; height: 20px; font-size: 8px;";

      case "small":
        return "width: 32px; height: 32px; font-size: 12px;";

      case "medium":
        return "width: 48px; height: 48px; font-size: 20px;";

      case "large":
        return "width: 64px; height: 64px; font-size: 24px;";

      case "xlarge":
        return "width: 96px; height: 96px; font-size: 36px;";

      default:
        return `width: ${breakpoint}; height: ${breakpoint}; `;
    }
  }

  function handleAltLetters() {
    if (alt) {
      if ((alt == null ? void 0 : alt.indexOf(" ")) >= 0) {
        return alt.split(" ")[0].charAt(0).toUpperCase() + alt.split(" ")[1].charAt(0).toUpperCase();
      } else {
        return alt.substring(0, 2).toUpperCase();
      }
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
    "data-testid": "Wps-AvatarWrapper",
    href: href,
    ...wrapperProps,
    ...otherProps,
    className: "jsx-2444823468 " + _style.default.dynamic([["1316352002", [handleClickable(), handleShape(), handleBorderColor(), handleBackgroundColor, handleTextColor(), handleSize(xs), theme.breakpoints.sm.min, handleSize(sm), theme.breakpoints.md.min, handleSize(md), theme.breakpoints.lg.min, handleSize(lg), theme.breakpoints.xl.min, handleSize(xl)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || wrapperProps && wrapperProps.className != null && wrapperProps.className || (0, _classnames.default)("Wps-AvatarWrapper", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1316352002",
      dynamic: [handleClickable(), handleShape(), handleBorderColor(), handleBackgroundColor, handleTextColor(), handleSize(xs), theme.breakpoints.sm.min, handleSize(sm), theme.breakpoints.md.min, handleSize(md), theme.breakpoints.lg.min, handleSize(lg), theme.breakpoints.xl.min, handleSize(xl)],
      children: `.Wps-AvatarWrapper.__jsx-style-dynamic-selector{${handleClickable()} position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:1.25rem;line-height:1;font-weight:500;${handleShape()} overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;${handleBorderColor()} ${handleBackgroundColor} ${handleTextColor()} ${handleSize(xs)};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-AvatarWrapper.__jsx-style-dynamic-selector{${handleSize(sm)};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-AvatarWrapper.__jsx-style-dynamic-selector{${handleSize(md)};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-AvatarWrapper.__jsx-style-dynamic-selector{${handleSize(lg)};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-AvatarWrapper.__jsx-style-dynamic-selector{${handleSize(xl)};}}`
    }), (src || brokenSrc) && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      src: src ? src : brokenSrc,
      alt: alt,
      "data-testid": "Wps-Avatar",
      ...imageProps,
      className: "jsx-2444823468 " + _style.default.dynamic([["1316352002", [handleClickable(), handleShape(), handleBorderColor(), handleBackgroundColor, handleTextColor(), handleSize(xs), theme.breakpoints.sm.min, handleSize(sm), theme.breakpoints.md.min, handleSize(md), theme.breakpoints.lg.min, handleSize(lg), theme.breakpoints.xl.min, handleSize(xl)]]]) + " " + (imageProps && imageProps.className != null && imageProps.className || (0, _classnames.default)("Wps-Avatar") || "")
    }), !src && !brokenSrc && !icon && !alt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_broken.default, {}), !src && !brokenSrc && !icon && alt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: handleAltLetters()
    }), !src && !brokenSrc && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: icon
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "2444823468",
      children: ".Wps-Avatar.jsx-2444823468{width:100%;height:100%;text-align:center;object-fit:cover;object-position:center;color:transparent;text-indent:10000px;}"
    })]
  });
};

const Avatar = /*#__PURE__*/_react.default.memo(WuiAvatar);

exports.Avatar = Avatar;