import { createSignal, useContext } from "solid-js";
import { LoginContext, ModalContext } from "./Root";

export function LoginForm() {
  const modal_ctx = useContext(ModalContext);
  const login_ctx = useContext(LoginContext);
  const [username, setUsername] = createSignal("");
  const [password, setPassword] = createSignal("");
  const [waiting, setWaiting] = createSignal(false);
  const [error, setError] = createSignal(false);

  async function loginFailed() {
    setError(true);
    setWaiting(false);
    setTimeout(() => {
      setError(false);
    }, 1000);
  }

  return (
    <form class="form-control">
      <label class="label">
        <span class="label-text">Username</span>
      </label>
      <input
        type="text"
        placeholder="username"
        value={username()}
        class="input input-bordered"
        onChange={(e) => {
          setUsername(e.target.value);
        }} />
      <label class="label">
        <span class="label-text">Password</span>
      </label>
      <input
        type="password"
        placeholder="password"
        value={password()}
        class="input input-bordered"
        onChange={(e) => {
          setPassword(e.target.value);
        }} />
      <button
        class={"btn btn-primary mt-4" + (error() ? " btn-error" : "")}
        onClick={(b) => {
          b.preventDefault();
          setWaiting(true);
          submitLogin(username(), password()).then((token) => {
            if (token != "") {
              setWaiting(false);
              setError(false);
              login_ctx?.setUsername(username());
              setUsername("");
              setPassword("");
              login_ctx?.setToken(token);
              modal_ctx?.setLoginModalOpen(false);
            } else {
              loginFailed();
            }
          });
        }}
      >
        {waiting() ? "Logging in..." : "Login"}
      </button>
    </form>
  );
}

// This function is responsible for sending the login request to the server
// and storing the token in localstorage
export async function submitLogin(
  username: string,
  password: string
): Promise<string> {
  const response = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password }),
  });

  if (response.ok) {
    const data = await response.json();
    if (data.token && data.username) {
      localStorage.setItem("token", data.token);
      localStorage.setItem("username", data.username);
      return data.token;
    }
  }
  return "";
}