import React from "react"

import PropTypes from "prop-types"

import Button from "@mui/material/Button"
import TextField from "@mui/material/TextField"
import InputAdornment from "@mui/material/InputAdornment"
import PersonRoundedIcon from "@mui/icons-material/PersonRounded"
import EmailRoundedIcon from "@mui/icons-material/EmailRounded"
import LocalPhoneRoundedIcon from "@mui/icons-material/LocalPhoneRounded"
import CommentRoundedIcon from "@mui/icons-material/CommentRounded"
import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"

import Box from "@mui/material/Box"
import { styled } from "@mui/material/styles"

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

const myPalette = theme.palette

const CustomTextField = styled(TextField)(({ theme, borderColor, textColor }) => ({
  "& label.Mui-focused": {
    color: textColor,
  },
  "& .MuiInput-underline:after": {
    borderBottomColor: borderColor,
  },
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: borderColor,
    },
    "&:hover fieldset": {
      borderColor: borderColor,
    },
    "&.Mui-focused fieldset": {
      borderColor: borderColor,
    },
  },
}))

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 FormFooter({borderColor, textColor}) {
  const handleSubmit = (event) => {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    // eslint-disable-next-line no-console
    console.log({
      email: data.get("nombre"),
      password: data.get("password"),
    })
  }

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <CustomTextField 
        borderColor={borderColor}
        textColor={textColor}
        margin="normal"
        required
        fullWidth
        id="name"
        label="Nombre"
        name="name"
        autoComplete="name"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <PersonRoundedIcon />
            </InputAdornment>
          ),
        }}
      />
      <CustomTextField
        borderColor={borderColor}
        textColor={textColor}
        margin="normal"
        required
        fullWidth
        name="email"
        label="Email"
        type="email"
        id="email"
        autoComplete="email"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <EmailRoundedIcon />
            </InputAdornment>
          ),
        }}
      />
      <CustomTextField
        borderColor={borderColor}
        textColor={textColor}
        margin="normal"
        required
        fullWidth
        name="phone"
        label="Teléfono"
        type="number"
        id="phone"
        autoComplete="phone"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <LocalPhoneRoundedIcon />
            </InputAdornment>
          ),
        }}
      />
      <CustomTextField
        multiline
        borderColor={borderColor}
        textColor={textColor}
        margin="normal"
        required
        fullWidth
        name="message"
        label="Mensaje"
        type="text"
        id="message"
        autoComplete="message"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <CommentRoundedIcon />
            </InputAdornment>
          ),
        }}
      />
      <CustomButton
        variant="contained"
        type="submit"
        fullWidth
        sx={{ mt: 1, mb: 2 }}
        endIcon={<ArrowForwardIosRoundedIcon />}
      >
        Consultar
      </CustomButton >
    </Box>
  )
}

FormFooter.propTypes = {
  borderColor: PropTypes.string.isRequired,
  textColor: PropTypes.string.isRequired,
}

export default FormFooter
