import * as React from 'react';
import { InitialsAvatar } from '../InitialsAvatar';
import { IPUserAvatar } from './UserAvatar.interface';
import Style from './UserAvatar.style';

export const UserAvatar: React.FunctionComponent<IPUserAvatar> = (props) => {
   const style: any = {};
   const {
      sizeCircle,
      size,
      user: { name = '', image },
      skeleton = false,
   } = props;

   /**
    * Tamanho do size
    */
   let classStyle = 'ds-user-avatar';

   switch (size) {
      case 'xs':
      case 's':
      case 'm':
      case 'l':
      case 'xl':
         classStyle += ` initials-${size}`;
         break;
      default:
         classStyle += ` initials-m`;
   }

   if (sizeCircle) {
      style.width = `${sizeCircle}px`;
      style.height = `${sizeCircle}px`;
   }

   return image && !skeleton ? (
      <Style>
         <div className={classStyle} style={style}>
            <img src={image} />
         </div>
      </Style>
   ) : (
      <InitialsAvatar skeleton={skeleton} name={name} size={size} sizeCircle={sizeCircle} />
   );
};
