import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { IconMailPlus, IconSend } from "@tabler/icons-react";
import { toast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle
} from "@/components/ui/dialog";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { SelectDropdown } from "@/components/select-dropdown";
import { userTypes } from "../data/data";

const formSchema = z.object({
	email: z
		.string()
		.min(1, { message: "Email is required." })
		.email({ message: "Email is invalid." }),
	role: z.string().min(1, { message: "Role is required." }),
	desc: z.string().optional()
});
type UserInviteForm = z.infer<typeof formSchema>;

interface Props {
	open: boolean;
	onOpenChange: (open: boolean) => void;
}

export function UsersInviteDialog({ open, onOpenChange }: Props) {
	const form = useForm<UserInviteForm>({
		resolver: zodResolver(formSchema),
		defaultValues: { email: "", role: "", desc: "" }
	});

	const onSubmit = (values: UserInviteForm) => {
		form.reset();
		toast({
			title: "You submitted the following values:",
			description: (
				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
				</pre>
			)
		});
		onOpenChange(false);
	};

	return (
		<Dialog
			open={open}
			onOpenChange={(state) => {
				form.reset();
				onOpenChange(state);
			}}>
			<DialogContent className="sm:max-w-md">
				<DialogHeader className="text-left">
					<DialogTitle className="flex items-center gap-2">
						<IconMailPlus /> Invite User
					</DialogTitle>
					<DialogDescription>
						Invite new user to join your team by sending them an email
						invitation. Assign a role to define their access level.
					</DialogDescription>
				</DialogHeader>
				<Form {...form}>
					<form
						id="user-invite-form"
						onSubmit={form.handleSubmit(onSubmit)}
						className="space-y-4">
						<FormField
							control={form.control}
							name="email"
							render={({ field }) => (
								<FormItem>
									<FormLabel>Email</FormLabel>
									<FormControl>
										<Input
											type="email"
											placeholder="eg: john.doe@gmail.com"
											{...field}
										/>
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name="role"
							render={({ field }) => (
								<FormItem className="space-y-1">
									<FormLabel>Role</FormLabel>
									<SelectDropdown
										defaultValue={field.value}
										onValueChange={field.onChange}
										placeholder="Select a role"
										items={userTypes.map(({ label, value }) => ({
											label,
											value
										}))}
									/>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name="desc"
							render={({ field }) => (
								<FormItem className="">
									<FormLabel>Description (optional)</FormLabel>
									<FormControl>
										<Textarea
											className="resize-none"
											placeholder="Add a personal note to your invitation (optional)"
											{...field}
										/>
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
					</form>
				</Form>
				<DialogFooter className="gap-y-2">
					<DialogClose asChild>
						<Button variant="outline">Cancel</Button>
					</DialogClose>
					<Button type="submit" form="user-invite-form">
						Invite <IconSend />
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}