infoalloggi-monorepo/apps/infoalloggi/src/forms/FormMustChangePassword.tsx

import toast from "react-hot-toast";
import { z } from "zod/v4";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { Button } from "~/components/ui/button";
import { Switch } from "~/components/ui/switch";
import { useZodForm } from "~/lib/zodForm";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";

export const MustChangePasswordForm = ({
	id,
	mustChangePassword,
}: {
	id: UsersId;
	mustChangePassword: boolean;
}) => {
	const schema = z.object({
		mustChangePassword: z.boolean(),
	});

	type FormValues = z.infer<typeof schema>;

	z.config(z.locales.it());

	const form = useZodForm(schema, {
		defaultValues: {
			mustChangePassword,
		},
	});
	const utils = api.useUtils();

	const { mutate } = api.users.editUser.useMutation({
		onError: (error) => {
			toast.error(error.message);
		},
		onSuccess: async () => {
			toast.success("Impostazione salvata con successo");
			await utils.auth.getSession.invalidate();
			await utils.users.getUser.invalidate();
			await utils.users.getClientProfilo.invalidate({
				userId: id,
			});
		},
	});

	async function onSubmit(fields: FormValues) {
		mutate({
			id: id,
			data: {
				mustChangePassword: fields.mustChangePassword,
			},
		});
	}

	return (
		<Form {...form}>
			<form className="space-y-8 px-0.5" onSubmit={form.handleSubmit(onSubmit)}>
				<FormField
					control={form.control}
					name="mustChangePassword"
					render={({ field }) => (
						<FormItem className="w-full">
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="mustChangePassword">
									Forza cambio password al prossimo accesso
								</FormLabel>
								<FormControl>
									<Switch
										checked={field.value}
										className="data-[state=checked]:bg-neutral-700"
										id="mustChangePassword"
										onCheckedChange={field.onChange}
									/>
								</FormControl>
								<FormMessage />
							</div>
						</FormItem>
					)}
				/>

				<Button type="submit">Salva</Button>
			</form>
		</Form>
	);
};