import Dialog from '@mui/material/Dialog'
import PropTypes from 'prop-types'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'

import StripePayment from './stripe-payment'

export default function StripeDialog({
  open,
  handleClose,
  selectedMontant,
  setSelectedMontant,
  validMontant,
  setValidMontant,
  prices,
  paymentIntent,
  setClientSecret,
  setPaymentIntent,
  setIsLoading,
  setClientEmail,
  clientEmail,
  error,
  setError,
  isLoading,
  children
}) {
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

  return (
    <div>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        aria-labelledby='card-payment'
        onClose={handleClose}
      >
        <DialogTitle textAlign='center' id='card-payment'>
          {'Don par carte bancaire'}
        </DialogTitle>
        <DialogContent>
          <StripePayment
            selectedMontant={selectedMontant}
            setSelectedMontant={setSelectedMontant}
            validMontant={validMontant}
            setValidMontant={setValidMontant}
            prices={prices}
            paymentIntent={paymentIntent}
            setClientSecret={setClientSecret}
            setPaymentIntent={setPaymentIntent}
            setIsLoading={setIsLoading}
            setClientEmail={setClientEmail}
            clientEmail={clientEmail}
            error={error}
            setError={setError}
            isLoading={isLoading}
          />
          {children}
        </DialogContent>
      </Dialog>
    </div>
  )
}

StripeDialog.defaultProps = {
  selectedMontant: null,
  validMontant: null,
  paymentIntent: null,
  clientEmail: null,
  error: null,
  children: null
}

StripeDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  handleClose: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  selectedMontant: PropTypes.string,
  setSelectedMontant: PropTypes.func.isRequired,
  validMontant: PropTypes.string,
  setValidMontant: PropTypes.func.isRequired,
  prices: PropTypes.array.isRequired,
  paymentIntent: PropTypes.string,
  setClientSecret: PropTypes.func.isRequired,
  setPaymentIntent: PropTypes.func.isRequired,
  setIsLoading: PropTypes.func.isRequired,
  setClientEmail: PropTypes.func.isRequired,
  clientEmail: PropTypes.string,
  error: PropTypes.string,
  setError: PropTypes.func.isRequired,
  children: PropTypes.node
}