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

              }}

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

}