"use client";

import { Button } from "@/components/ui/button";

import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { addDevice } from "@/queries/devices";
import { tryCatch } from "@/utils/tryCatch";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Plus } from "lucide-react";
import { useState } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";

export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
	const formSchema = z.object({
		name: z.string().min(2, { message: "Name is required." }),
		mac_address: z
			.string()
			.min(2, { message: "MAC Address is required." })
			.regex(
				/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
				"Please enter a valid MAC address",
			),
	});

	const [disabled, setDisabled] = useState(false);
	const [open, setOpen] = useState(false);
	const {
		register,
		handleSubmit,
		reset,
		formState: { errors },
	} = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
	});

	if (!user_id) {
		return null;
	}

	const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (data) => {
		console.log(data);
		setDisabled(true);
		const [error, response] = await tryCatch(
			addDevice({
				mac: data.mac_address,
				name: data.name,
			}),
		);
		if (error) {
			toast.error(error.message || "Something went wrong.");
			setDisabled(false);
		} else {
			console.log(response);
			setOpen(false);
			setDisabled(false);
			toast.success("Device successfully added!");
			reset();
		}
	};

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button
					className="gap-2 items-center"
					disabled={disabled}
					variant="default"
				>
					Add Device
					<Plus size={16} />
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>New Device</DialogTitle>
					<DialogDescription>
						To add a new device, enter the device name and mac address below.
						Click save when you are done.
					</DialogDescription>
				</DialogHeader>
				<form onSubmit={handleSubmit(onSubmit)}>
					<div className="grid gap-4 py-4">
						<div className="flex flex-col gap-2">
							<div>
								<Label htmlFor="device_name" className="text-right">
									Device Name
								</Label>
								<Input
									placeholder="eg: Iphone X"
									type="text"
									{...register("name")}
									id="device_name"
									className="col-span-3"
								/>
								<span className="text-red-500 text-sm">
									{errors.name?.message}
								</span>
							</div>

							<div>
								<Label htmlFor="address" className="text-right">
									Mac Address
								</Label>
								<Input
									placeholder="Mac address of your device"
									{...register("mac_address")}
									id="mac_address"
									className="col-span-3"
								/>
								<span className="text-red-500 text-sm">
									{errors.mac_address?.message}
								</span>
							</div>
						</div>
					</div>
					<DialogFooter>
						<Button disabled={disabled} type="submit">
							{disabled ? <Loader2 className="animate-spin" /> : "Save"}
						</Button>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	);
}