import * as React from 'react';
import { colorInitialsAvatar, IPropsInitialsAvatar } from './InitialsAvatar.interface';
import Style from './InitialsAvatar.style';

export const InitialsAvatar: React.FunctionComponent<IPropsInitialsAvatar> = (props) => {
   const { name, dark, circle = true, sizeCircle, size, style = {}, skeleton = false } = props;
   const initials = skeleton ? '' : name[0].toUpperCase();

   /**
    * Resgatar cor de acordo com nome
    */
   const colorNumber = skeleton
      ? 0
      : name.split('').reduce((previousValue, currentValue) => previousValue + currentValue.charCodeAt(0), 0);
   const color = skeleton ? '#eee' : colorInitialsAvatar[colorNumber % colorInitialsAvatar.length];

   style.color = {
      color: 'white',
   };

   if (!dark) {
      style.background = `${color}`;
   } else {
      style.color = `${color}`;
   }

   if (skeleton) {
      style.background = `#eee`;
   }
   /**
    * Tamanho do size
    */
   let classStyle = 'initials-letter';

   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`;
      style.lineHeight = `${sizeCircle}px`;
      style.fontSize = `${sizeCircle / 2}px`;
   }

   return (
      <Style circle={circle}>
         <div className={classStyle} style={style}>
            {initials}
         </div>
      </Style>
   );
};
