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

"use client"

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 { cn } from "@/lib/utils"
import { zodResolver } from "@hookform/resolvers/zod"
import type { User } from "@prisma/client"
import { UserX } from "lucide-react"
import { useState } from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { Textarea } from "../ui/textarea"



const validationSchema = z.object({
	reason: z.string().min(5, { message: "Reason is required" }),
})

export default function UserRejectDialog({ user }: { user: User }) {
	const [disabled, setDisabled] = useState(false)
	const [open, setOpen] = useState(false)
	const {
		register,
		handleSubmit,
		formState: { errors },
	} = useForm<z.infer<typeof validationSchema>>({
		resolver: zodResolver(validationSchema),
	})

	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
		setDisabled(true)
		console.log(data)
		toast.promise(Rejectuser({
			userId: user.id,
			reason: data.reason,
		}), {
			loading: "Rejecting...",
			success: () => {
				setDisabled(false)
				setOpen((prev) => !prev)
				return "Rejected!"
			},
			error: (error) => {
				setDisabled(false)
				return error || "Something went wrong"
			},
		})
		setDisabled(false)

	}

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button disabled={disabled} variant="destructive">
					<UserX />
					Reject
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>Are you sure you want to {" "}
						<span className="text-red-500">reject</span>{" "}
						this user?</DialogTitle>
					<DialogDescription className="py-2">
						<li>Name: {user.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.phoneNumber}</li>
					</DialogDescription>
				</DialogHeader>
				<form onSubmit={handleSubmit(onSubmit)}>
					<div className="grid gap-4 py-4">
						<div className="flex flex-col items-start gap-1">
							<Label htmlFor="reason" className="text-right">
								Rejection details
							</Label>
							<Textarea rows={10} {...register("reason")} id="reason" className={cn("col-span-5", errors.reason && "ring-2 ring-red-500")} />
							<span className="text-sm text-red-500">
								{errors.reason?.message}
							</span>
						</div>
					</div>
					<DialogFooter>
						<Button variant={"destructive"} disabled={disabled} type="submit">
							Reject
						</Button>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	)
}