text: import React, { useState, useEffect } from "react";
  import { Link, useHistory } from "react-router-dom";
  import {
    Grid,
    CircularProgress,
    Typography,
    Button,
    Tabs,
    Tab,
    TextField,
    Fade,
  } from "@material-ui/core";
  import { withRouter } from "react-router-dom";
  import classnames from "classnames";
  import authApi from "../../api/auth";
  // styles
  import useStyles from "./styles";
  
  // logo
  import ReactDialog from "../../components/Dialog/Dialog";
  import logo from "./logo.svg";
  import google from "../../images/google.svg";
  import handleApi from "../../api/handleApi";
  function Login(props) {
    var classes = useStyles();
    let history = useHistory();
    var [isLoading, setIsLoading] = useState(false);
    const [enabled, setEnabled] = useState(false);
    var [activeTabId, setActiveTabId] = useState(0);
    var [username, setUsername] = useState("");
    const [error, setError] = useState(false);
    var [password, setPassword] = useState("");
    const handleSubmit = (values) => {
      const login = (res) => {
        if (res.status === 200) {
          localStorage.removeItem("accessToken");
          localStorage.removeItem("username");
  
          localStorage.setItem("accessToken", res.data.accessToken);
          localStorage.setItem("username", res.data.admin.username);
          console.log(props.location.state);
          if (!props.location.state) {
            history.push("/app/book");
            return;
          }
  
          return;
        } else {
          setError(true);
        }
      };
  
      handleApi(authApi.loginAdmin, login, { ...values });
    };
    const handleRegister = (username, password) => {
      const register = (res) => {
        if (res.status === 200) {
          setError(false);
          localStorage.removeItem("accessToken");
          localStorage.removeItem("username");
  
          localStorage.setItem("accessToken", res.data.accessToken);
          // localStorage.setItem("username", res.data.newAdmin.username);
          console.log(props.location.state);
          if (!props.location.state) {
            history.push("/app/book");
            return;
          }
  
          return;
        } else {
          setError(true);
        }
      };
      handleApi(authApi.registerAdmin, register, {
        username: username,
        password: password,
      });
    };
  
    // console.log(error, "hjhg");
    return (
      <Grid container className={classes.container}>
        <div className={classes.logotypeContainer}>
          <img src={logo} alt="logo" className={classes.logotypeImage} />
          <Typography className={classes.logotypeText}>BooksWorld</Typography>
        </div>
  
        <div className={classes.formContainer}>
          <div className={classes.form}>
            <Tabs
              value={activeTabId}
              onChange={(e, id) => setActiveTabId(id)}
              indicatorColor="primary"
              textColor="primary"
              centered
            >
              <Tab label="Login" classes={{ root: classes.tab }} />
              <Tab label="New User" classes={{ root: classes.tab }} />
            </Tabs>
            {activeTabId === 0 && (
              <React.Fragment>
                <Typography variant="h1" className={classes.greeting}>
                  Xin chào
                </Typography>
  
                <TextField
                  id="username"
                  InputProps={{
                    classes: {
                      underline: classes.textFieldUnderline,
                      input: classes.textField,
                    },
                  }}
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  margin="normal"
                  placeholder="Email Adress"
                  type="email"
                  fullWidth
                />
                <TextField
                  id="password"
                  InputProps={{
                    classes: {
                      underline: classes.textFieldUnderline,
                      input: classes.textField,
                    },
                  }}
                  onChange={(e) => setPassword(e.target.value)}
                  margin="normal"
                  placeholder="Password"
                  type="password"
                  fullWidth
                />
                <div className={classes.formButtons}>
                  {isLoading ? (
                    <CircularProgress size={26} className={classes.loginLoader} />
                  ) : (
                    <Button
                      // disabled={
                      //   // username.length === 0 || password.length === 0
                      // }
                      variant="contained"
                      color="primary"
                      size="large"
                      onClick={() => {
                        // setError(false);
                        handleSubmit({ username: username, password: password });
                      }}
                    >
                      Login
                    </Button>
                  )}
                </div>
                {/* <ReactDialog enabled={error}></ReactDialog> */}
                {error === true ? (
                  <ReactDialog
                    setError={setError}
                    title="Đăng nhập không thành công"
                  >
                    Tài khoản hoặc mật khẩu không đúng
                  </ReactDialog>
                ) : null}
              </React.Fragment>
            )}
            {activeTabId === 1 && (
              <React.Fragment>
                <Typography variant="h1" className={classes.greeting}>
                  Xin chào!
                </Typography>
                <Typography variant="h2" className={classes.subGreeting}>
                  Tạo tài khoản của bạn
                </Typography>
  
                <TextField
                  id="name"
                  InputProps={{
                    classes: {
                      underline: classes.textFieldUnderline,
                      input: classes.textField,
                    },
                  }}
                  onChange={(e) => setUsername(e.target.value)}
                  margin="normal"
                  placeholder="Tên đăng nhập"
                  type="text"
                  fullWidth
                />
                <TextField
                  id="email"
                  onChange={(e) => setPassword(e.target.value)}
                  InputProps={{
                    classes: {
                      underline: classes.textFieldUnderline,
                      input: classes.textField,
                    },
                  }}
                  // onChange={(e) => setLoginValue(e.target.value)}
                  margin="normal"
                  placeholder="Mật khẩu"
                  type="password"
                  fullWidth
                />
  
                <div className={classes.creatingButtonContainer}>
                  {isLoading ? (
                    <CircularProgress size={26} />
                  ) : (
                    <Button
                      size="large"
                      variant="contained"
                      color="primary"
                      fullWidth
                      className={classes.createAccountButton}
                      onClick={() => {
                        handleRegister(username, password);
                        console.log(username, password);
                        console.log(error);
                      }}
                    >
                      Đăng kí
                    </Button>
                  )}
                </div>
                {error === true ? (
                  <ReactDialog
                    setError={setError}
                    title="Đăng ký không thành công"
                  >
                    Tên đăng nhập đã tồn tại
                  </ReactDialog>
                ) : null}
              </React.Fragment>
            )}
          </div>
          <Typography color="primary" className={classes.copyright}>
            © 2014-{new Date().getFullYear()}{" "}
            <a
              style={{ textDecoration: "none", color: "inherit" }}
              href="https://flatlogic.com"
              rel="noopener noreferrer"
              target="_blank"
            >
              Flatlogic
            </a>
            , LLC. All rights reserved.
          </Typography>
        </div>
      </Grid>
    );
  }
  
  export default withRouter(Login);
  