import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useMemo } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import Broken from "./broken";
import isThemePalette from "../../utils/isThemePalette";
import contrast from "../../utils/contrast";
import randomColor from "../../utils/randomColor";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const WuiAvatar = props => {
  const theme = useTheme();
  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 = useMemo(() => {
    return props.backgroundColor ? props.backgroundColor : groupBackgroundColor ? groupBackgroundColor : randomColor();
  }, [props.backgroundColor, groupBackgroundColor]);
  const handleBackgroundColor = useMemo(() => {
    return `background: ${isThemePalette(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: ${contrast(isThemePalette(borderColor) ? theme.palette[borderColor][500] : borderColor)};`;
  }

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

    return `color: ${contrast(isThemePalette(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__*/_jsxs(Component, {
    "data-testid": "Wps-AvatarWrapper",
    href: href,
    ...wrapperProps,
    ...otherProps,
    className: "jsx-2444823468 " + _JSXStyle.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 || classnames("Wps-AvatarWrapper", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      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__*/_jsx("img", {
      src: src ? src : brokenSrc,
      alt: alt,
      "data-testid": "Wps-Avatar",
      ...imageProps,
      className: "jsx-2444823468 " + _JSXStyle.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 || classnames("Wps-Avatar") || "")
    }), !src && !brokenSrc && !icon && !alt && /*#__PURE__*/_jsx(Broken, {}), !src && !brokenSrc && !icon && alt && /*#__PURE__*/_jsx(_Fragment, {
      children: handleAltLetters()
    }), !src && !brokenSrc && icon && /*#__PURE__*/_jsx(_Fragment, {
      children: icon
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      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;}"
    })]
  });
};

export const Avatar = /*#__PURE__*/React.memo(WuiAvatar);