import React from "react";
import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";

import ContainerLogin from "../../components/Base/ContainerLogin";
import VideoComponent from "../../components/VideoTag/VideoComponent";
import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
import Company from "../../components/LoginComponents/CompanyLogo/Company";

//! Can i Delete this comment above?
// const Copyright = () => {
// 	return (
// 		<Typography variant="body2" color="textSecondary" align="center">
// 			{"Copyleft "}
// 			<Link color="inherit" href="https://github.com/canove">
// 				Canove
// 			</Link>{" "}
// 			{new Date().getFullYear()}
// 			{"."}
// 		</Typography>
// 	);
// };

// const useStyles = makeStyles((theme) => ({
//   paper: {
//     marginTop: theme.spacing(8),
//     display: "flex",
//     flexDirection: "column",
//     alignItems: "center",
//   },
//   avatar: {
//     margin: theme.spacing(1),
//     backgroundColor: theme.palette.secondary.main,
//   },
//   form: {
//     width: "100%", // Fix IE 11 issue.
//     marginTop: theme.spacing(1),
//   },
//   submit: {
//     margin: theme.spacing(3, 0, 2),
//   },
// }));

const Login = () => {
  const [user, setUser] = React.useState({ email: "", password: "" });

  const { handleLogin } = React.useContext(AuthContext);

  const handleChangeInput = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const handlSubmit = (e) => {
    e.preventDefault();
    handleLogin(user);
  };

  return (
    <ContainerLogin>
      <VideoComponent width={"350px"} autoPlay muted loop position={"relative"} />
      <LoginForm
        handleChangeInput={handleChangeInput}
        handlSubmit={handlSubmit}
        user={user.email}
        password={user.password}
      />
      <Company />
    </ContainerLogin>
  );
};

export default Login;