Proyectos de Subversion LeadersLinked - SPA

import React, { lazy, Suspense, useState } from 'react';
import { Badge, IconButton, Avatar as MuiAvatar } from '@mui/material';
import Edit from '@mui/icons-material/Edit';
import colors from '@styles/config/colors';

const ImageModal = lazy(() => import('@components/modals/ImageModal'));

const Avatar = ({
  src = '',
  alt = 'Avatar',
  styles = {},
  uploadUrl = '',
  edit = false,
  size,
  badgeStyles,
  badgeContent,
  onImageChange,
  onClick,
  ...props
}) => {
  const [showModal, setShowModal] = useState(false);
  const [image, setImage] = useState('');

  const toggleModal = () => setShowModal(!showModal);

  const defaultBadgeContent = edit ? (
    <IconButton
      sx={{
        backgroundColor: colors.button.background.primary,
        color: colors.button.text.primary,
        ':hover': {
          backgroundColor: colors.button.background.primary,
          color: colors.button.text.primary,
          opacity: 0.9
        }
      }}
      color='primary'
      onClick={toggleModal}
    >
      <Edit />
    </IconButton>
  ) : null;

  const avatarContent = (
    <MuiAvatar src={image || src} alt={alt} sx={styles} {...props} onClick={onClick} />
  );

  return (
    <>
      {edit || badgeContent ? (
        <Badge
          overlap='circular'
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          sx={badgeStyles}
          badgeContent={badgeContent || defaultBadgeContent}
        >
          {avatarContent}
        </Badge>
      ) : (
        avatarContent
      )}
      {edit && (
        <Suspense fallback={null}>
          <ImageModal
            show={showModal}
            url={uploadUrl}
            message={`Imágenes recomendadas: ${size ?? '200px'} x ${size ?? '200px'}`}
            onClose={toggleModal}
            onComplete={(newImage) => {
              setImage(newImage);
              if (onImageChange) {
                onImageChange(newImage);
              }
            }}
          />
        </Suspense>
      )}
    </>
  );
};

export default Avatar;