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

interface SignInProps {
	showSignIn: Accessor<boolean>;
	setShowSignIn: Setter<boolean>;
}

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

	createEffect(() => {
		if (props.showSignIn()) {
			dialogElement.showModal();
		}
	});

	function handleClose() {
		dialogElement.close();
		usernameInput.value = "";
		passwordInput.value = "";
		props.setShowSignIn(false);
	}

	async function doSignIn(e: Event) {
		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");
				handleClose();
			} 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 (
		<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
			<form ref={formElement}>
				<div class="signin-header title">
					Sign in
					<button title="Close dialog" onClick={handleClose}>
						<ClearSVG />
					</button>
				</div>
				<hr />
				<label for="username-input">Username:</label>
				<input
					ref={usernameInput}
					id="username-input"
					type="text"
					minlength={1}
					required
					value=""
					onChange={() => {}}
				/>
				<label for="password-input">Password:</label>
				<input
					ref={passwordInput}
					id="password-input"
					type="password"
					minlength={1}
					required
					value=""
					onChange={() => {}}
				/>
				<button ref={submitButton} onclick={doSignIn} class="signin-button" title="Submit sign in">
					Submit
					<div ref={loadingElement} style={{ display: "none", width: "24px", height: "24px" }}>
						<LoadingSpinner center />
					</div>
				</button>
			</form>
		</dialog>
	);
}