import * as React from "react"

import PropTypes from "prop-types"

import Backdrop from "@mui/material/Backdrop"
import Box from "@mui/material/Box"
import Modal from "@mui/material/Modal"
import Fade from "@mui/material/Fade"
import Typography from "@mui/material/Typography"

import theme from "../assets/styles/myTheme"

import ContactForm from "./ContactForm"

const myPalette = theme.palette

const styleBox = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  boxShadow: 24,
  borderRadius: "0px 20px 0px 0px",
  p: 4,
  "&:focus": {
    outline: "none",
  }
}

const styleTitle = {
  color: myPalette.primary.main,
  textAlign: "center"
}

function ContactModal({ open, handleModalClose }) {
  const handleClose = () => {
    handleModalClose(false)
  }

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={styleBox}>
            <Typography id="transition-modal-title" variant="h5" component="h1" sx={styleTitle}>
              ¡Contáctanos!
            </Typography>
            <ContactForm borderColor={myPalette.primary.main} textColor={myPalette.primary.main} />
          </Box>
        </Fade>
      </Modal>
    </div>
  )
}

ContactModal.propTypes = {
  open: PropTypes.bool.isRequired,
  handleModalClose: PropTypes.func.isRequired,
}

export default ContactModal
