import { useQuery } from "@tanstack/react-query";
import { useNavigate, useRouterState } from "@tanstack/react-router";
import axios from "axios";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { useAuth } from "@/lib/authClient";
import { useAppForm } from "@/lib/formStuff";
import { getPallets } from "../../-utils/querys/quality/getPallets";

const areaSelection = [
	{ value: "rework", label: "Rework" },
	{ value: "holdArea", label: "Hold Area" },
	{ value: "inspectionArea", label: "Inspection Area" },
];
export default function RequestPallet() {
	const { session } = useAuth();
	const navigate = useNavigate();
	const router = useRouterState();
	const { refetch } = useQuery(getPallets());
	const currentPath = router.location.href;
	const form = useAppForm({
		defaultValues: {
			username: "",
			runningNr: 0,
			moveTo: "",
		},
		onSubmit: async ({ value }) => {
			if (!session || !session.user) {
				toast.error("You are allowed to do this unless you are logged in");
				navigate({ to: "/login", search: { redirect: currentPath } });
				return;
			}
			if (value.runningNr === 0) {
				return toast.error(
					"You did not change the running number, please add a valid running number",
				);
			}

			if (value.moveTo === "") {
				return toast.error(
					"Please select where you would like the pallets taken to.",
				);
			}
			const postData = {
				runningNr: Number(value.runningNr),
				moveTo: value.moveTo,
				username: session?.user.username,
			};

			console.log(postData);
			try {
				const res = await axios.post(
					"/lst/old/api/quality/newrequest",
					postData,
				);

				console.log(res.data);

				if (res.data.success) {
					toast.success(res.data.message);
					form.reset();
					refetch();
				}

				if (!res.data.success) {
					toast.error(res.data.message);
				}
			} catch (error) {
				console.log(error);
				toast.error("Encountered and error please try again");
			}
		},
	});
	return (
		<Dialog>
			<DialogTrigger>
				<Button variant="outline">Request Pallet</Button>
			</DialogTrigger>
			<DialogContent className="w-5/6 m-2">
				<DialogHeader>
					<DialogTitle>
						Request a pallet for the warehouse to retrieve{" "}
					</DialogTitle>
					<DialogDescription>
						This form is used to request a pallet to be brought up to be
						inspected, reworked, placed on hold, or please fill out and the
						warehouse will see and bring to the designated location. Once
						finished click done or cancel.
					</DialogDescription>
				</DialogHeader>
				<div>
					<form
						onSubmit={(e) => {
							e.preventDefault();
							form.handleSubmit();
						}}
					>
						<div className="w-5/6 m-2">
							<form.AppField
								name="runningNr"
								children={(field) => (
									<field.InputField
										label="Pallet Running Number"
										inputType="number"
										required={true}
									/>
								)}
							/>
						</div>
						<div className="w-5/6 m-2">
							<form.AppField
								name="moveTo"
								// listeners={{
								// 	onChange: ({ value }) => {
								// 		onValueChange(value);
								// 	},
								// }}
								children={(field) => (
									<field.SelectField
										label="Select Area"
										placeholder="Quality Areas"
										options={areaSelection}
									/>
								)}
							/>
						</div>
						<div className="w-5/6 m-2">
							<DialogFooter>
								<DialogClose asChild>
									<Button
										variant="outline"
										onClick={() => {
											form.reset();
										}}
									>
										Cancel
									</Button>
								</DialogClose>
								<DialogClose asChild>
									<Button
										variant="outline"
										onClick={() => {
											form.reset();
										}}
									>
										Done
									</Button>
								</DialogClose>
								<Button type="submit">Submit</Button>
							</DialogFooter>
						</div>
					</form>
				</div>
			</DialogContent>
		</Dialog>
	);
}
