import React from "react"

import PropTypes from "prop-types"

import { styled } from "@mui/material/styles"
import Button from "@mui/material/Button"
import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"

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

import ContactModal from "./ContactModal"

const myPalette = theme.palette

const CustomButton = styled(Button)(({ theme }) => ({
  color: `${myPalette.secondary.text} !important`,
  backgroundColor: `${myPalette.secondary.main} !important`,
  paddingTop: "5px !important",
  paddingBottom: "5px !important",
  borderRadius: "5px !important",
  "&:hover": {
    backgroundColor: `${myPalette.secondary.light} !important`,
  },
}))

function ContactButton({ children, width }) {
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = (value) => setOpen(value) 

  return (
    <>
      <CustomButton
        variant="contained"
        type="submit"
        sx={{ mt: 1, mb: 2, width: width }}
        endIcon={<ArrowForwardIosRoundedIcon />}
        onClick={handleOpen}
      >
        { children }
      </CustomButton >

      <ContactModal handleModalClose={handleClose} open={open}/>
    </>
  )
}

ContactButton.propTypes = {
  children: PropTypes.string.isRequired,
  width: PropTypes.string,
}

export default ContactButton
