import {
  Avatar,
  Box,
  Button,
  Checkbox,
  Container,
  FormControlLabel,
  IconButton,
  InputAdornment,
  Link,
  TextField,
  Typography,
} from "@mui/material"
import { Grid } from "@mui/material"
import React, { useState } from "react"
import { Trans, useTranslation } from "react-i18next"
import { Navigate, useSearchParams } from "react-router-dom"
import { API_DOMAIN } from "../../../../../services/ApiConfig.ts"
import { Visibility, VisibilityOff } from "@mui/icons-material"

export default function SignIn() {
  //const [isErrorInEmail,setIsErrorInEmail] = useState(false);
  //const [isErrorInPassword,setIsErrorInPassword] = useState(false);
  const loginFormAction: string = API_DOMAIN + "api/v1/oauth/token"
  const { t } = useTranslation()
  const [showPassword, setShowPassword] = useState<boolean>(false)

  const [searchParams] = useSearchParams()
  const loginChallenge = searchParams.get("login_challenge")
  if (!loginChallenge) {
    return <Navigate to="/signin" />
  } else {
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault()
      const data = new FormData(event.currentTarget)
      data.set("login_challenge", loginChallenge)
      event.currentTarget.submit()
    }

    return (
      <Container component="main" maxWidth="xs">
        <Box
          sx={{
            marginTop: 8,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: "primary.main" }}></Avatar>
          <Typography component="h1" variant="h5">
            {t("Sign in.Sign in")}
          </Typography>
          <Box
            component="form"
            action={loginFormAction}
            method="POST"
            onSubmit={handleSubmit}
            sx={{ mt: 1 }}
          >
            <TextField
              margin="normal"
              required
              fullWidth
              id="username"
              label={t("EmailAddress")}
              name="username"
              autoComplete="email"
              autoFocus
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label={t("Password")}
              type={showPassword ? "text" : "password"}
              id="password"
              autoComplete="current-password"
              slotProps={{
                input: {
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={() => setShowPassword((prev) => !prev)}
                        edge="end"
                        aria-label={showPassword ? t("Hide password") : t("Show password")}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                },
              }}
            />
            <TextField //TODO: Remove this text field
              name="login_challenge"
              id="login_challenge"
              value={loginChallenge}
              type="hidden"
              sx={{ display: "none" }}
            />
            <TextField
              name="client_id"
              value="2658"
              id="client_id"
              type="hidden"
              sx={{ display: "none" }}
            />
            <TextField
              name="grant_type"
              value="password"
              id="grant_type"
              type="hidden"
              sx={{ display: "none" }}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              sx={{ display: "none" }}
              label={t("Sign in.RememberMe")}
            />
            <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
              {t("Sign in.Sign in")}
            </Button>
            <Grid container sx={{ width: "100%" }}>
              <Grid size={6} sx={{ display: "none" }}>
                <Link href="#" variant="body2">
                  {t("Sign in.ForgotPassword")}
                </Link>
              </Grid>
              <Grid size={6}>
                <Typography sx={{ fontSize: "small" }}>
                  <Trans i18nKey={"Sign in.NoAccount"}>
                    Don't have an account?
                    <Link href="/sign-up" variant="body2">
                      Sign up
                    </Link>
                  </Trans>
                </Typography>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </Container>
    )
  }
}
