import * as classNames from "classnames";
import * as React from "react";
import * as _ from "lodash";

import { Badge, IBadgeProps } from "./../Badge";
import { ISpriteProps, Sprite } from "./../Sprite";
import { Upload, IUploadProps } from "./../Upload";
import { Stats, IStatsProps } from "./../Stats";

export enum AvatarSize {
  Standard = "Standard",
  Medium = "Medium",
  Large = "Large",
}

export interface IAvatarProps {
  /**
   * This is a required fallback character that is
   * rendered if there is no `src`
   */
  character?: string;
  className?: string;
  size?: AvatarSize;
  sprite?: ISpriteProps;
  style?: React.CSSProperties;
  src?: string;
  /**
   * An outer rim around the avatar. This is in addition to the default
   * white inner rim.
   */
  rim?: boolean;
  // @ts-ignore
  rimColor?: string; 
  badge?: IBadgeProps;
  editable?: IUploadProps;
  onClick?: () => void;
  innerRef?: React.RefObject<HTMLSpanElement>;
  expanded?: boolean;
  name?: string;
  stats?: IStatsProps;
}

export const Avatar = ({
  rim,
  rimColor,
  sprite,
  src,
  size,
  className,
  style,
  character,
  badge,
  editable,
  onClick,
  innerRef,
  expanded = false,
  name,
  stats,
}: IAvatarProps) => (
    <span
      className={classNames("avatar", {
        "avatar--with-rim": rim,
        "avatar--with-badge": badge,
        "avatar--with-editable": editable,
        "avatar--with-sprite": sprite,
        "avatar--expanded": expanded,
        "avatar--empty": !_.isString(src),
        "avatar--large": size === AvatarSize.Large,
        "avatar--medium": size === AvatarSize.Medium,
        [`border-${rimColor}`]: rimColor,
        [className]: _.isString(className),
      })}
      {...onClick && { onClick: onClick }}
      {...innerRef && { ref: innerRef }}
      {...style && { style: style }}
    >

      {!_.isEmpty(src) ? 
        <span className="avatar__img-container">
          <img className="avatar__img" src={src} /> 
        </span> : sprite ?
            <span className="avatar__sprite">
              <Sprite {...sprite} />
            </span> :
            <span className="avatar__character">{character}</span>
      }

      {(badge || editable) && (
        <span className={classNames("avatar__badge", {
            "avatar__badge--with-icon": editable || badge.icon,
            "avatar__badge--with-icon-only": editable || _.isEmpty(badge.text),
          })}
        >
          {editable ? <Upload {...editable} /> : <Badge {...badge} />}
        </span>
      )}

      <div className={classNames("avatar__expanded")}>
        {name && (
          <div className="avatar__expanded-name">
            {name}
          </div>
        )}

        {(stats && !_.isEmpty(stats.stats)) && (
          <div className="avatar__expanded-stats">
            <Stats {...stats} />
          </div>
        )}
      </div>
    </span>
  );