import React from "react";
import style from "./Avatar.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";

import avatarPropTypes, {
  defaultProps,
  propsDescription
} from "./Avatar.propTypes";
import constantProps from "./Avatar.constantProps";

export default function Avatar(props) {
  let {
    shape,
    size,
    color,
    text,
    photoUrl,
    floatingLayer,
    floatingLayerText,
    floatingLayerAlign,
    customClassName,
    onError,
    onLoad,
    showAvatar,
    getContent
  } = props;
  // icon-support , getContent
  let className = getCompliedClassName(
    customClassName,
    {
      [style.base]: true,
      [style[color]]: !!color,
      [style[shape]]: !!shape,
      [style[size]]: !!size
    },
    {
      [customClassName.shape]: !!customClassName.shape,
      [customClassName.size]: !!customClassName.size,
      [customClassName.color]: !!customClassName.color
    }
  );
  if ((floatingLayer || floatingLayerText) && showAvatar) {
    return (
      <span className={style.container}>
        <span
          className={`${floatingLayerText ? style.floatinglayer : null} ${
            floatingLayerText ? style[floatingLayerAlign + "_" + size] : null
          }`}
        >
          {floatingLayer ? null : floatingLayerText}
          {floatingLayer ? floatingLayer : null}
        </span>
        {photoUrl ? (
          <img
            src={photoUrl}
            onError={onError && onError}
            className={className}
            onLoad={onLoad && onLoad}
          />
        ) : (
          <span className={className}>{getContent(text, "upperCase")}</span>
        )}
      </span>
    );
  } else if (photoUrl && showAvatar) {
    return (
      <img
        src={photoUrl}
        onError={onError && onError}
        className={className}
        onLoad={onLoad && onLoad}
      />
    );
  }
  return <span className={className}>{getContent(text, "upperCase")}</span>;
}

Avatar.propTypes = avatarPropTypes;
Avatar.defaultProps = defaultProps;
Avatar.propsDescription = propsDescription;
Avatar.constantProps = constantProps;
