import React from "react"

import TextField from "@mui/material/TextField"
import Box from "@mui/material/Box"
import { withStyles } from "@material-ui/core"

import ContactButton from "./ContactButton"

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

const myPalette = theme.palette

const CustomTextField = withStyles({
  root: {
    "& label.Mui-focused": {
      color: "white",
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: myPalette.primary.main,
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: myPalette.primary.main,
      },
      "&:hover fieldset": {
        borderColor: myPalette.primary.main,
      },
      "&.Mui-focused fieldset": {
        borderColor: myPalette.primary.main,
      },
    },
  },
})(TextField)

function FormFooter() {
  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
        margin="normal"
        required
        fullWidth
        id="name"
        label="Nombre"
        name="name"
        autoComplete="name"
        autoFocus
        InputLabelProps={{
          style: { color: myPalette.primary.contrastText}, 
        }}
      />
      <CustomTextField
        margin="normal"
        required
        fullWidth
        name="email"
        label="Email"
        type="email"
        id="email"
        autoComplete="email"
        InputLabelProps={{
          style: { color: myPalette.primary.contrastText}, 
        }}
      />
      <CustomTextField
        margin="normal"
        required
        fullWidth
        name="phone"
        label="Teléfono"
        type="number"
        id="phone"
        autoComplete="phone"
        InputLabelProps={{
          style: { color: myPalette.primary.contrastText}, 
        }}
      />
      <ContactButton>
        Contactar
      </ContactButton>
    </Box>
  )
}

export default FormFooter
