import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './Avatar.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface AvatarProps {}

const Avatar = (props: AvatarProps) => {
  const { className, active, indic, profile, small, medium } = props;

  if (!profile) return false;

  let name = profile.firstName && profile.firstName.charAt(0);

  if (profile.lastName) {
    name += profile.lastName.charAt(0);
  }

  if (!name) name = profile.email.charAt(0);

  return (
    <div
      className={styles(
        'avatar',
        className,
        active && 'active',
        small && 'small',
        medium && 'medium',
      )}
    >
      {indic && <div className={styles('indic')} />}
      {profile.profilePicture && <img src={profile.profilePicture.small} alt="profile" />}
      {!profile.profilePicture && <span>{name}</span>}
    </div>
  );
};

export default Avatar;
