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

export const InitialsAvatar: React.FunctionComponent<IPropsInitialsAvatar> = (props) => {
   const { name, dark, sizeCircle, size, 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];

   const style: any = {
      color: 'white',
   };

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

   if (skeleton) {
      style.backgroundColor = `#eee`;
   }

   return (
      <Container style={style} size={size} sizeCircle={sizeCircle}>
         <Initials color="white" size={size} sizeCircle={sizeCircle}>
            {initials}
         </Initials>
      </Container>
   );
};
