import { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";

import { toast } from "react-toastify"

import useAuth from "../../auth/auth";

import FormField from "../../components/FormField"
import "./login.css"


const Login = () => {
  const { setToken } = useAuth();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const navigate = useNavigate();
  const location = useLocation();
  const searchPath = new URLSearchParams(location.search);
  const redirectPath = searchPath.get("to") || "/";

  const [usernameEmpty, setUsernameEmpty] = useState(false);
  const [passwordEmpty, setPasswordEmpty] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    setUsernameEmpty(!username);
    setPasswordEmpty(!password);

    if (!username || !password) {
      return;
    }

    // TODO: request to API - login
    if (username === "a" && password === "a") {
      const token = "todo.jwt.token";
      setToken(token);
      navigate(redirectPath, { replace: true });
    } else {
      toast.error("Wrong login or password");
    }
  };

  return (
    <div className="login">
      <div className="login-overlay-text">
        <h3>
          Welcome to Picrinth Web-Admin!<br/>
          Picrinth is an open source app for scrolling synchronized<br/>
          feeds of pictures from different sources together with your friends<br/>
          Enjoy [#]
        </h3>
      </div>
      <div className="login-left">
        <video className="login-video" autoPlay loop muted>
          <source src={"./login-video.mp4"} type="video/mp4" />
        </video>
      </div>
      <div className="login-right">
        <h2 className="login-logo-block">
          <img className="login-logo" src="./logo.png" alt="Picrinth logo" />
        </h2>
        <div className="login-login-block">
          <form onSubmit={handleSubmit}
            style={{
              flexDirection: "column",
              display: "flex",
              gap: "10px",
              alignItems: "center",
            }}
            noValidate
          >
            <FormField
              type="text"
              placeholder="Username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
              showError={usernameEmpty}
              errorMessage="Please enter your username"
            />
            <FormField
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              showError={passwordEmpty}
              errorMessage="Please enter your password"
            />
            <button type="submit" className="login-button">
              Login
            </button>
          </form>
          <h3 style={{textAlign: "center"}}>
            <a href={`/register?to=${redirectPath}`} className="login-link">Create account</a>
          </h3>
        </div>
        <div className="login-links-block">
          <h2>
            <a href="https://git.frik.su/Beesquit/picrinth-admin" className="login-link">Frontend</a>
          </h2>
          <h2>
            <a href="https://git.frik.su/Beesquit/picrinth-server" className="login-link">Backend</a>
          </h2>
          <h2>
            <a href="https://git.frik.su/Beesquit" className="login-link">Author</a>
          </h2>
        </div>
      </div>
    </div>
  );
};

export default Login;