Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Box } from '@mui/material'
import BootstrapModal from 'react-bootstrap/Modal'

import { isPromise } from '@app/utils'

import Button from '../buttons/Buttons'
import Spinner from '../Spinner'

import styles from './Modal.module.scss'

const Modal = ({
  show = false,
  title = '',
  onAccept = () => null,
  onClose = () => {},
  onShow = () => {},
  onReject = null,
  labelAccept = '',
  labelReject = '',
  size = 'md',
  centered = true,
  animation = true,
  showFooter = true,
  dialogClassName,
  children
}) => {
  const [loading, setLoading] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const handleAccept = useCallback(() => {
    const enableLoading = isPromise(onAccept)

    if (enableLoading) setLoading(true)
    onAccept()
  }, [onAccept])

  useEffect(() => {
    if (!show && loading) setLoading(false)
  }, [show, loading])

  return (
    <BootstrapModal
      animation={animation}
      className={dialogClassName}
      centered={centered}
      show={show}
      size={size}
      onHide={onClose}
      onShow={onShow}
    >
      <BootstrapModal.Header className={styles['modal-header']} closeButton>
        <BootstrapModal.Title>{title}</BootstrapModal.Title>
      </BootstrapModal.Header>

      <BootstrapModal.Body className={styles['modal-content']}>
        {children}

        {loading ? (
          <Box
            sx={{
              position: 'absolute',
              zIndex: 1250,
              width: '100%',
              height: '100%',
              top: 0,
              left: 0,
              display: 'grid',
              placeItems: 'center'
            }}
          >
            <Spinner />
          </Box>
        ) : null}
      </BootstrapModal.Body>

      {showFooter ? (
        <BootstrapModal.Footer className={styles['modal-footer']}>
          <Button variant='primary' onClick={handleAccept} disabled={loading}>
            {labelAccept || labels.accept}
          </Button>
          <Button variant='secondary' onClick={onReject || onClose}>
            {labelReject || labels.cancel}
          </Button>
        </BootstrapModal.Footer>
      ) : null}
    </BootstrapModal>
  )
}

export default Modal