import { useForm } from "@tanstack/react-form";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { LstCard } from "../../../extendedUi/LstCard";

export default function RemoveAsNonReusable() {
	const [stockOut, setStockOut] = useState(false);
	const form = useForm({
		defaultValues: { runningNr: " ", reason: " " },
		onSubmit: async ({ value }) => {
			// Do something with form data
			setStockOut(true);

			//console.log(value);

			try {
				const res = await axios.post(
					"/lst/old/api/logistics/removeasreusable",

					value, // this is basically the data field
				);

				if (res.data.success) {
					toast.success(res.data.message);
					form.reset();
					setStockOut(false);
				} else {
					console.log(res.data);
					toast.error(res.data?.message);
					form.reset();
					setStockOut(false);
				}
			} catch (error: any) {
				console.log(error);
				toast.error(error.message);
				setStockOut(false);
			}
		},
	});
	return (
		<LstCard>
			<CardHeader>
				<p>Remove a pallet as non reusable</p>
			</CardHeader>
			<form
				onSubmit={(e) => {
					e.preventDefault();
					e.stopPropagation();
				}}
			>
				<CardContent>
					<form.Field
						name="runningNr"
						validators={{
							// We can choose between form-wide and field-specific validators
							onChange: ({ value }) =>
								value.length > 2
									? undefined
									: "Please enter a valid running number",
						}}
						children={(field) => {
							return (
								<div className="w-96">
									<Label htmlFor="runningNr" className="mb-2">
										Runnning Number
									</Label>
									<Input
										name={field.name}
										value={field.state.value}
										onBlur={field.handleBlur}
										required
										type="number"
										onChange={(e) => field.handleChange(e.target.value)}
									/>
									{field.state.meta.errors.length ? (
										<em>{field.state.meta.errors.join(",")}</em>
									) : null}
								</div>
							);
						}}
					/>
					<form.Field
						name="reason"
						validators={{
							// We can choose between form-wide and field-specific validators
							onChange: ({ value }) =>
								value.length > 10
									? undefined
									: "Please enter a valid reason on why you needed to remove this pallet",
						}}
						children={(field) => {
							return (
								<div className="">
									<Label htmlFor="reason" className="mb-2">
										Reason for removing
									</Label>
									<Textarea
										name={field.name}
										value={field.state.value}
										onBlur={field.handleBlur}
										//type="number"
										onChange={(e) => field.handleChange(e.target.value)}
									/>
									{field.state.meta.errors.length ? (
										<div className="text-pretty max-w-96">
											<em>{field.state.meta.errors.join(",")}</em>
										</div>
									) : null}
								</div>
							);
						}}
					/>
					<div className="flex mt-2 justify-end">
						<Button onClick={form.handleSubmit} disabled={stockOut}>
							Remove
						</Button>
					</div>
				</CardContent>
			</form>
		</LstCard>
	);
}
