import type { Accessor, Setter } from "solid-js";
import { ClearSVG } from "./SVG";
import "./SignIn.css";
import { toast } from "../utils";
import { LoadingSpinner } from "./LoadingScreen";
import { Modal } from "./Modal";

interface SignInProps {
	showSignIn: Accessor<boolean>;
	setShowSignIn: Setter<boolean>;
	onLoggedIn: () => void;
}

export function SignIn(props: SignInProps) {
	let formElement!: HTMLFormElement;
	let usernameInput!: HTMLInputElement;
	let passwordInput!: HTMLInputElement;
	let loadingElement!: HTMLDivElement;
	let submitButton!: HTMLButtonElement;

	function clearInputs() {
		usernameInput.value = "";
		passwordInput.value = "";
	}

	async function doSignIn(e: Event, close: () => void) {
		e.preventDefault();
		usernameInput.setCustomValidity("");
		if (!formElement.reportValidity()) return;
		if (usernameInput.value.includes(":")) {
			usernameInput.setCustomValidity('Username can\'t contain a colon ":"');
			usernameInput.reportValidity();
			return;
		}
		loadingElement.style.display = "block";
		submitButton.disabled = true;
		try {
			const response = await fetch("/login", {
				method: "POST",
				body: `${usernameInput.value}:${passwordInput.value}`,
			});
			if (response.status === 200) {
				toast("Login successful", "success");
				props.onLoggedIn();
				close();
			} else if (response.status === 401) {
				toast("Login failed: wrong credentials", "error");
			} else {
				toast(`Login failed: unknown error, code: ${response.status}`, "error", await (await response.blob()).text());
			}
		} finally {
			loadingElement.style.display = "none";
			submitButton.disabled = false;
		}
	}

	return (
		<Modal show={props.showSignIn} setShow={props.setShowSignIn} onClose={clearInputs}>
			{(close) => (
				<form ref={formElement} onSubmit={(e) => doSignIn(e, close)}>
					<div class="signin-header title">
						Sign in
						<button type="button" title="Close dialog" onClick={close}>
							<ClearSVG />
						</button>
					</div>
					<hr />
					<label for="username-input">Username:</label>
					<input ref={usernameInput} id="username-input" type="text" minlength={1} required value="" />
					<label for="password-input">Password:</label>
					<input ref={passwordInput} id="password-input" type="password" minlength={1} required value="" />
					<button ref={submitButton} type="submit" class="signin-button" title="Submit sign in">
						Submit
						<div ref={loadingElement} style={{ display: "none", width: "24px", height: "24px" }}>
							<LoadingSpinner center />
						</div>
					</button>
				</form>
			)}
		</Modal>
	);
}