import * as React from "react";
import { useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from "formik";
import { Link } from "react-router-dom";
import { Box, Checkbox, Typography, FormControlLabel } from "@mui/material";
import Logo from "@pages/Logo";
import CleverButton from "@kitUI/cleverButton";
import OutlinedInput from "@kitUI/outlinedInput";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { authStore } from "@root/stores/auth";

interface Values {
  email: string;
  password: string;
}

function validate(values: Values) {
  const errors = {} as any;
  if (!values.email) {
    errors.email = "Required";
  }
  if (!values.password) {
    errors.password = "Required";
  } else if (!/^[\S]{8,25}$/i.test(values.password)) {
    errors.password = "Invalid password";
  }
  return errors;
}
export default () => {
  const theme = useTheme();
  const navigate = useNavigate();
  const [isReady, setIsReady] = React.useState(true);
  const { makeRequest } = authStore();

  return (
    <Formik
      initialValues={{
        email: "",
        password: "",
      }}
      validate={validate}
      onSubmit={(values) => {
        makeRequest({
          url: "https://admin.pena.digital/auth/login",
          body: {
            email: values.email,
            password: values.password,
          },
          useToken: false,
        })
          .then((e) => {
            console.log(e);
            navigate("/users");
          })
          .catch((e) => {
            console.log(e);
            enqueueSnackbar(e.message ? e.message : `Unknown error`);
          });
      }}
    >
      <Form>
        <Box
          component="section"
          sx={{
            minHeight: "100vh",
            height: "100%",
            width: "100%",
            backgroundColor: theme.palette.content.main,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            padding: "15px 0",
          }}
        >
          <Box
            component="article"
            sx={{
              width: "350px",
              backgroundColor: theme.palette.content.main,
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              "> *": {
                marginTop: "15px",
              },
            }}
          >
            <Logo />
            <Box>
              <Typography variant="h5" color={theme.palette.secondary.main}>
                Добро пожаловать
              </Typography>
              <Typography variant="h6" color={theme.palette.secondary.main}>
                Мы рады что вы выбрали нас!
              </Typography>
            </Box>
            <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
              <EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
              <Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
            </Box>
            <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
              <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
              <Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
            </Box>
            <Box
              component="article"
              sx={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <FormControlLabel
                sx={{ color: "white" }}
                control={
                  <Checkbox
                    value="checkedA"
                    inputProps={{ "aria-label": "Checkbox A" }}
                    sx={{
                      color: "white",
                      transform: "scale(1.5)",
                      "&.Mui-checked": {
                        color: "white",
                      },
                      "&.MuiFormControlLabel-root": {
                        color: "white",
                      },
                    }}
                  />
                }
                label="Запомнить этот компьютер"
              />
            </Box>
            <Link to="/restore" style={{ textDecoration: "none" }}>
              <Typography color={theme.palette.golden.main}>Забыли пароль?</Typography>
            </Link>
            <CleverButton type="submit" text="Войти" isReady={isReady} />
            <Box
              sx={{
                display: "flex",
              }}
            >
              <Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography>
              <Link to="/signup" style={{ textDecoration: "none" }}>
                <Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography>
              </Link>
            </Box>
          </Box>
        </Box>
      </Form>
    </Formik>
  );
};