sarlink-portal/components/user/user-reject-dialog.tsx

"use client";

import { UserX } from "lucide-react";
import { useActionState, useEffect, useState } from "react";
import { toast } from "sonner";
import { rejectUser } from "@/actions/user-actions";
// import { Rejectuser } from "@/actions/user-actions";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import type { UserProfile } from "@/lib/types/user";
import { cn } from "@/lib/utils";
import { Textarea } from "../ui/textarea";


export type RejectUserFormState = {
	message: string;
	fieldErrors?: {
		rejection_details?: string[];
	};
	payload?: FormData;
};

export const initialState: RejectUserFormState = {
	message: "",
	fieldErrors: {},
};

export default function UserRejectDialog({ user }: { user: UserProfile }) {
	const [open, setOpen] = useState(false);

	const [state, formAction, isPending] = useActionState(rejectUser, initialState);

	useEffect(() => {
		if (state.message && state !== initialState) {
			if (state.fieldErrors && Object.keys(state.fieldErrors).length > 0) {
				toast.error(state.message);
			} else if (!state.fieldErrors) {
				toast.success("User rejected successfully!");
				setOpen(false);
			} else {
				toast.error(state.message);
			}
		}
	}, [state]);


	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button disabled={isPending} variant="destructive">
					<UserX />
					Reject
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle className="text-muted-foreground">
						Are you sure?
					</DialogTitle>
					<DialogDescription className="py-2">
						<li>
							Name: {user.first_name} {user.last_name}
						</li>
						<li>ID Card: {user.id_card}</li>
						<li>Address: {user.address}</li>
						<li>
							DOB:{" "}
							{new Date(user.dob ?? "").toLocaleDateString("en-US", {
								month: "short",
								day: "2-digit",
								year: "numeric",
							})}
						</li>
						<li>Phone Number: {user.mobile}</li>
					</DialogDescription>
				</DialogHeader>
				<form action={formAction}>
					<div className="grid gap-4 py-4">
						<div className="flex flex-col items-start gap-2">
							<input type="hidden" name="userId" value={user.id} />
							<Label htmlFor="reason" className="text-right text-muted-foreground">
								Rejection details
							</Label>
							<Textarea
								rows={10}
								name="rejection_details"
								id="reason"
								defaultValue={state.payload?.get("rejection_details") as string}
								className={cn(
									"col-span-5",
									state.fieldErrors?.rejection_details && "ring-2 ring-red-500",
								)}
							/>
							<span className="text-sm text-red-500">
								{state.fieldErrors?.rejection_details?.[0]}
							</span>
						</div>
					</div>
					<DialogFooter>
						<Button variant={"destructive"} disabled={isPending} type="submit">
							Reject
						</Button>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	);
}