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';

import colors from '@styles/colors';

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

export default function Avatar({

  src = '',

  alt = '',

  styles = {},

  url = '',

  edit = false,

  size,

  badgeStyles,

  ...props

}) {

  const [showModal, setShowModal] = useState(false);

  const [image, setImage] = useState(src);

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

  if (edit) {

    return (

      <>

        <Badge

          overlap='circular'

          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}

          sx={badgeStyles}

          badgeContent={

            <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>

          }

        >

          <MuiAvatar src={image} alt={alt} sx={styles} {...props} icon />

        </Badge>

        <Suspense fallback={null}>

          <ImageModal

            show={showModal}

            url={url}

            message={`Imágenes recomendadas de ${size ?? '200px'} `}

            onClose={toggleModal}

            onComplete={(newImage) => setImage(newImage)}

          />

        </Suspense>

      </>

    );

  }

  return <MuiAvatar src={image} alt={alt} sx={styles} {...props} icon />;

}