frontend/src/features/auth/ui/AuthForm/AuthForm.tsx

import type { FC, ReactNode } from "react";

import { zodResolver } from "@hookform/resolvers/zod";
import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import {
	type AuthFormValues,
	loginSchema,
	registerSchema,
} from "../../model/auth.schema";

type AuthFormProps = {
	onSubmit: (email: string, password: string) => Promise<void>;
	register?: boolean;
};

const AuthForm: FC<AuthFormProps> = (props) => {
	const { onSubmit, register } = props;
	const { t } = useTranslation();
	const schema = register ? registerSchema : loginSchema;

	const methods = useForm<AuthFormValues>({
		resolver: zodResolver(schema),
	});

	const {
		formState: { errors, isSubmitting },
	} = methods;

	const [submitError, setSubmitError] = useState<null | string>(null);

	const submit = methods.handleSubmit(async (values) => {
		setSubmitError(null);

		try {
			await onSubmit(values.email, values.password);
		}
		catch {
			setSubmitError(t("auth.requestError"));
		}
	});

	const to = register ? "/login" : "/register";
	const switchLabel = t(register ? "auth.haveAccount" : "auth.noAccount");

	let switchLink: ReactNode;

	if (isSubmitting) {
		switchLink = (
			<Button aria-disabled disabled variant="subtle">
				{switchLabel}
			</Button>
		);
	}
	else {
		switchLink = (
			<Button component={Link} to={to} variant="subtle">
				{switchLabel}
			</Button>
		);
	}

	return (
		<FormProvider {...methods}>
			<form onSubmit={submit}>
				<Fieldset disabled={isSubmitting} variant="unstyled">
					<Stack>
						<TextInput
							label={t("auth.email")}
							{...methods.register("email")}
							error={errors.email?.message}
						/>

						<PasswordInput
							label={t("auth.password")}
							{...methods.register("password")}
							error={errors.password?.message}
						/>

						{register && (
							<PasswordInput
								label={t("auth.passwordConfirmation")}
								{...methods.register("passwordConfirmation")}
								error={errors.passwordConfirmation?.message}
							/>
						)}

						{submitError && <Alert color="red">{submitError}</Alert>}

						<Button loading={isSubmitting} type="submit">
							{t(register ? "auth.register" : "auth.login")}
						</Button>

						{switchLink}
					</Stack>
				</Fieldset>
			</form>
		</FormProvider>
	);
};

export { AuthForm };