import React, { useState } from "react";
import Link from "next/link";
import Grid from "@mui/material/Grid";
import IconButton from "@mui/material/IconButton";
import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import Button from "@mui/material/Button";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import styles from "./signinform.module.css";
import WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";

const SignInForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get("email"),
      password: data.get("password"),
    });
  };

  const [showPassword, setShowPassword] = useState(false);

  const handleTogglePassword = () => {
    setShowPassword(!showPassword);
  };

  return (
    <>
      <div className={styles.authenticationBox}>
        <Box
          component="main"
          sx={{
            maxWidth: "510px",
            ml: "auto",
            mr: "auto",
            padding: "50px 0 100px",
            paddingInline: { sm: "10px", lg: "0" },
            zIndex: "999",
            position: "relative",
          }}
        >
          <Grid item xs={12} md={12} lg={12} xl={12}>
            <Box>
              <Box
                display="flex"
                alignItems="center"
                justifyContent="center"
                mb="70px"
              >
                <img
                  src="/images/logos/android-chrome-512x512.png"
                  alt="logo"
                  className={styles.favicon}
                />
              </Box>
              {/* <Typography
                as="h1"
                fontSize="28px"
                fontWeight="700"
                mb="5px"
                color="#fff"
              >
                Sign In{" "}
              </Typography> */}

              <Box component="form" noValidate onSubmit={handleSubmit}>
                <Box
                  sx={{
                    background: "#fff",
                    padding: "30px 20px",
                    borderRadius: "10px",
                    mb: "20px",
                  }}
                  className="bg-black"
                >
                  <Grid container alignItems="center" spacing={2}>
                    <Grid item xs={12}>
                      {/* <Typography
                        component="label"
                        sx={{
                          fontWeight: "500",
                          fontSize: "14px",
                          mb: "10px",
                          display: "block",
                        }}
                      >
                        Email
                      </Typography> */}

                      <TextField
                        required
                        fullWidth
                        id="email"
                        label="Email Address"
                        name="email"
                        autoComplete="email"
                        InputProps={{
                          style: { borderRadius: 8 },
                        }}
                        sx={textFieldStyles}
                      />
                    </Grid>

                    <Grid item xs={12}>
                      {/* <Typography
                        component="label"
                        sx={{
                          fontWeight: "500",
                          fontSize: "14px",
                          mb: "10px",
                          display: "block",
                        }}
                      >
                        Password
                      </Typography> */}

                      <TextField
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type={showPassword ? "text" : "password"}
                        id="password"
                        autoComplete="new-password"
                        InputProps={{
                          style: { borderRadius: 8 },
                          endAdornment: (
                            <InputAdornment position="end">
                              <IconButton
                                onClick={handleTogglePassword}
                                sx={{
                                  color: "#4687BA",
                                  "&:hover": {
                                    color: "#4687BA",
                                  },
                                }}
                              >
                                {showPassword ? (
                                  <VisibilityOff />
                                ) : (
                                  <Visibility />
                                )}
                              </IconButton>
                            </InputAdornment>
                          ),
                        }}
                        sx={textFieldStyles}
                      />
                    </Grid>
                  </Grid>
                </Box>

                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  sx={{
                    mt: 2,
                    backgroundColor: "#4687BA",
                    textTransform: "capitalize",
                    borderRadius: "8px",
                    fontWeight: "500",
                    fontSize: "16px",
                    padding: "12px 10px",
                    color: "#fff !important",
                    "&:hover": {
                      backgroundColor: "rgba(70, 135, 186, 0.8)"
                    },
                  }}
                >
                  Sign In
                </Button>
              </Box>
            </Box>
          </Grid>
        </Box>
      </div>
    </>
  );
};

export default SignInForm;

// Custom styles for text fields in sign up
const textFieldStyles = {
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "#4687BA",
      "&:hover": {
        borderColor: "#4687BA",
      },
    },
    "&.Mui-focused fieldset": {
      borderColor: "#4687BA",
    },
  },
  "& .MuiInputAdornment-positionEnd": {
    cursor: "pointer",
  },
  "& .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "&:hover .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "&.Mui-focused .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "& .MuiInputBase-input": {
    color: "#4687BA",
  },
  "&:hover .MuiInputBase-input": {
    color: "#4687BA",
  },
  "&.Mui-focused .MuiInputBase-input": {
    color: "#4687BA",
  },
};