import React, { useState } from "react";
import { connect } from "react-redux";
import {
  InputAdornment,
  LinearProgress,
  Paper,
  TextFieldProps,
} from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import withStyles from "@mui/styles/withStyles";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Grid from "@mui/material/Grid";
import { encodeFileName } from "../../../../../common/utils";
import { LockIcon, LoginMinIOLogo, UsersIcon } from "../../../../../icons";
import { spacingUtils } from "../../../Common/FormComponents/common/styleLibrary";
import message from "../../../../../utils/message";
import { userLogin } from "../../services";
import Cookie from "js-cookie";

const styles = (theme: Theme) =>
  createStyles({
    form: {
      width: "100%", // Fix IE 11 issue.
    },
    submit: {
      margin: "30px 0px 16px",
      height: 40,
      boxShadow: "none",
      padding: "16px 30px",
    },
    loginPage: {
      height: "100%",
      display: "flex",
      flexFlow: "column",
      alignItems: "stretch",
      position: "relative",
      padding: 84,

      "@media (max-width: 900px)": {
        padding: 0,
      },
    },
    shadowBox: {
      boxShadow:
        "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 15px 50px 0px",
      height: "100%",
    },
    loginContainer: {
      flex: 1,
      height: "100%",

      "& .right-items": {
        padding: 50,
        flex: 1,
        height: "100%",
        display: "flex",
        flexFlow: "column",
        alignItems: "center",
        justifyContent: "center",
        maxWidth: "33%",

        "@media (max-width: 900px)": {
          maxWidth: "100%",
          margin: "auto",
        },
      },
      "& .consoleTextBanner": {
        fontWeight: 300,
        fontSize: "calc(3vw + 3vh + 1.5vmin)",
        lineHeight: 1.15,
        color: "#ffffff",
        flex: 1,
        textAlign: "center",
        height: "100%",
        display: "flex",
        justifyContent: "flex-start",
        margin: "auto",
        flexFlow: "column",
        background: "linear-gradient(120deg,#081c42,#073052)",

        "& .logoLine": {
          display: "flex",
          alignItems: "center",
          fontSize: 18,
          marginTop: 40,
        },
        "& .left-items": {
          margin: "auto",
          textAlign: "left",
          paddingRight: 240,
          paddingBottom: 200,
          "@media (max-width: 1400px)": {
            paddingBottom: 120,
            paddingRight: 50,
          },
          "@media (max-width: 900px)": {
            paddingBottom: 0,
            paddingRight: 0,
          },
          "@media (max-width: 600px)": {
            paddingBottom: 0,
            paddingRight: 0,
          },
        },
        "& .left-logo": {
          "& .min-icon": {
            color: "white",
            width: 108,
          },
          marginBottom: 10,
        },
        "& .text-line1": {
          font: " 100 70px 'Lato'",

          "@media (max-width: 600px)": {
            fontSize: 35,
          },
          "@media (max-width: 800px)": {
            fontSize: 45,
          },
        },
        "& .text-line2": {
          fontSize: 100,
          fontWeight: 100,
          textTransform: "uppercase",
          "@media (max-width: 600px)": {
            fontSize: 35,
            marginLeft: 0,
          },
          "@media (max-width: 800px)": {
            fontSize: 55,
            marginLeft: 0,
          },
        },
        "& .logo-console": {
          display: "flex",
          alignItems: "center",

          "@media (max-width: 900px)": {
            marginTop: 20,
            flexFlow: "column",

            "& svg": {
              width: "50%",
            },
          },
        },
      },
    },
    "@media (max-width: 900px)": {
      loginContainer: {
        display: "flex",
        flexFlow: "column",

        "& .consoleTextBanner": {
          margin: 0,
          flex: 2,

          "& .left-items": {
            alignItems: "center",
            textAlign: "center",
          },

          "& .logoLine": {
            justifyContent: "center",
          },
        },
      },
    },
    loadingLoginStrategy: {
      textAlign: "center",
    },
    headerTitle: {
      marginRight: "auto",
      marginBottom: 15,
    },
    submitContainer: {
      textAlign: "right",
    },
    linearPredef: {
      height: 10,
    },

    loaderAlignment: {
      display: "flex",
      width: "100%",
      height: "100%",
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
    },
    retryButton: {
      alignSelf: "flex-end",
    },
    ...spacingUtils,
  });

const inputStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& .MuiOutlinedInput-root": {
        paddingLeft: 0,
        "& svg": {
          height: 16,
          color: theme.palette.primary.main,
        },
        "& input": {
          padding: 5,
          paddingLeft: 0,
          "&::placeholder": {
            fontSize: 12,
          },
          "@media (max-width: 900px)": {
            padding: 10,
          },
        },
        "& fieldset": {
          border: "none", // default
          borderBottom: "1px solid #EAEAEA",
          borderRadius: 0,
        },
        "&.Mui-focused fieldset": {
          borderBottom: "1px solid #000000",
          borderRadius: 0,
        },
        "& fieldset:hover": {
          borderBottom: "2px solid #000000",
          borderRadius: 0,
        },
      },
    },
  })
);

function LoginField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      classes={{
        root: classes.root,
      }}
      variant="standard"
      {...props}
    />
  );
}

interface ILoginProps {
  classes: any;
}

const Login = ({ classes }: ILoginProps) => {
  const [accessKey, setAccessKey] = useState<string>("");
  const [secretKey, setSecretKey] = useState<string>("");
  const [loginSending, setLoginSending] = useState<boolean>(false);

  const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoginSending(true);
    userLogin({
      user_name: accessKey,
      password: secretKey,
    })
      .then((res) => {
        const data = res.data;
        localStorage.setItem("userLoggedIn", encodeFileName(accessKey));
        Cookie.set("token", data.token);
        Cookie.set("plus_token", data.plus_token);
        message.success(`欢迎您！${accessKey}`);
        const searchParams = new URLSearchParams(window.location.search);
        const href = decodeURIComponent(searchParams.get("callbackUrl") || "");
        window.location.href = href;
      })
      .finally(() => {
        setLoginSending(false);
      });
  };

  const consoleText = "土星云";

  return (
    <Paper className={classes.loginPage}>
      <div className={classes.shadowBox}>
        <Grid container className={classes.loginContainer}>
          <Grid item className="consoleTextBanner">
            <div className="left-items">
              <div className="left-logo">
                <LoginMinIOLogo />
              </div>
              <div className="text-line1">欢迎来到</div>
              <div className="text-line2">{consoleText}</div>
            </div>
          </Grid>
          <Grid item className="right-items">
            <form className={classes.form} noValidate onSubmit={formSubmit}>
              <Grid container spacing={2}>
                <Grid item xs={12} className={classes.spacerBottom}>
                  <LoginField
                    fullWidth
                    id="accessKey"
                    className={classes.inputField}
                    value={accessKey}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setAccessKey(e.target.value)
                    }
                    placeholder={"用户名"}
                    name="accessKey"
                    autoComplete="username"
                    disabled={loginSending}
                    variant={"outlined"}
                    InputProps={{
                      startAdornment: (
                        <InputAdornment
                          position="start"
                          className={classes.iconColor}
                        >
                          <UsersIcon />
                        </InputAdornment>
                      ),
                    }}
                  />
                </Grid>
                <Grid item xs={12}>
                  <LoginField
                    fullWidth
                    className={classes.inputField}
                    value={secretKey}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setSecretKey(e.target.value)
                    }
                    name="secretKey"
                    type="password"
                    id="secretKey"
                    autoComplete="current-password"
                    disabled={loginSending}
                    placeholder={"密码"}
                    variant={"outlined"}
                    InputProps={{
                      startAdornment: (
                        <InputAdornment
                          position="start"
                          className={classes.iconColor}
                        >
                          <LockIcon />
                        </InputAdornment>
                      ),
                    }}
                  />
                </Grid>
              </Grid>
              <Grid item xs={12} className={classes.submitContainer}>
                <Button
                  type="submit"
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled={
                    secretKey === "" || accessKey === "" || loginSending
                  }
                >
                  登录
                </Button>
              </Grid>
              <Grid item xs={12} className={classes.linearPredef}>
                {loginSending && <LinearProgress />}
              </Grid>
            </form>
          </Grid>
        </Grid>
      </div>
    </Paper>
  );
};

export default connect()(withStyles(styles)(Login));
