import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomInput from "components/CustomInput/CustomInput.js";

import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";

import image from "assets/img/bgtbg.jpg";

import Collapse from "@material-ui/core/Collapse";
import Alert from "@material-ui/lab/Alert";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { useRouter } from "next/router";
const useStyles = makeStyles(styles);

export default function LoginPage(props) {
    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
    const [email, setEmail] = React.useState("");
    const [pass, setPass] = React.useState("");
    const [open, setOpen] = React.useState(false);
    const [error, setError] = React.useState("");
    const router = useRouter();
    setTimeout(function () {
        setCardAnimation("");
    }, 700);
    const classes = useStyles();
    const { ...rest } = props;

    const submitHandler = async (event) => {
        event.preventDefault();
        const res = await fetch("../api/auth/login", {
        body: JSON.stringify({
            partner: "hino",
            email: email,
            pass: pass,
        }),
        headers: {
            "Content-Type": "application/json",
        },
        method: "POST",
        });
        // console.log("res", res.S);
        if (res.ok) {
        router.push("/hino/home");
        } else {
        setError(await res.text());
        setOpen(true);
        }
    };

    return (
        <div>
        <Collapse className={classes.collapsible} in={open}>
            <Alert
            severity="error"
            action={
                <IconButton
                aria-label="close"
                color="inherit"
                size="small"
                onClick={() => {
                    setOpen(false);
                }}
                >
                <CloseIcon fontSize="inherit" />
                </IconButton>
            }
            >
            {error}
            </Alert>
        </Collapse>
        {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
        <div
            className={classes.pageHeader}
            style={{
            backgroundImage: "url(" + image + ")",
            backgroundSize: "cover",
            backgroundPosition: "top center",
            }}
        >
            <div className={classes.container}>
            <GridContainer justify="center">
                <GridItem xs={6}>
                <Card className={classes[cardAnimaton]}>
                    <form onSubmit={submitHandler} className={classes.form}>
                    <CardHeader color="info" className={classes.cardHeader}>
                        <h4>Login</h4>
                    </CardHeader>
                    <p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p>
                    <CardBody>
                        <CustomInput
                        labelText="Email..."
                        id="email"
                        value={email}
                        formControlProps={{
                            fullWidth: true,
                        }}
                        inputProps={{
                            type: "email",
                            onChange: (event) => setEmail(event.target.value),
                            endAdornment: (
                            <InputAdornment position="end">
                                <Email className={classes.inputIconsColor} />
                            </InputAdornment>
                            ),
                        }}
                        />
                        <CustomInput
                        labelText="Password"
                        id="pass"
                        value={pass}
                        formControlProps={{
                            fullWidth: true,
                        }}
                        inputProps={{
                            onChange: (event) => setPass(event.target.value),
                            type: "password",
                            endAdornment: (
                            <InputAdornment position="end">
                                <Icon className={classes.inputIconsColor}>
                                lock_outline
                                </Icon>
                            </InputAdornment>
                            ),
                            autoComplete: "off",
                        }}
                        />
                    </CardBody>
                    <CardFooter className={classes.cardFooter}>
                        <Button type="submit" color="info" size="lg">
                        Login
                        </Button>
                        <Button href="/hino/register" color="info" size="lg">
                        Register
                        </Button>
                    </CardFooter>
                    </form>
                </Card>
                </GridItem>
            </GridContainer>
            </div>
        </div>
        </div>
    );
}