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