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

export default function ConsumeMaterial() {
	const { register: register1, handleSubmit: handleSubmit1, reset } = useForm();
	const [submitting, setSubmitting] = useState(false);

	const handleConsume = async (data: any) => {
		setSubmitting(true);
		try {
			// const result = await axios.post(`/api/logistics/consume`, data, {
			//     headers: {Authorization: `Bearer ${token}`},
			// });
			const result = await axios.post(`/lst/old/api/logistics/consume`, data);
			if (result.data.success) {
				toast.success(result.data.message);
				setSubmitting(false);
				reset();
			}
			if (!result.data.success) {
				//console.log(result.data);
				setSubmitting(false);

				toast.error(result.data.message);
			}
		} catch (error: any) {
			console.log(error);
			setSubmitting(false);
			if (error.status === 401) {
				toast.error("Unauthorized to do this task.");
			} else {
				toast.error(
					"Unexpected error if this continues please constact an admin.",
				);
			}
		}
	};
	return (
		<div className="m-2">
			<LstCard>
				<CardHeader>
					<p className="text-center text-lg">Consuming Material.</p>
				</CardHeader>
				<div className="flex m-1">
					<div className="w-96 m-1">
						<LstCard>
							<form onSubmit={handleSubmit1(handleConsume)}>
								<div className="m-2">
									<Label htmlFor="runningNr">Enter unit running number</Label>
									<Input
										className="mt-2"
										//defaultValue="634"
										type="number"
										{...register1("runningNr")}
									/>
								</div>
								<div className="m-2">
									<Label htmlFor="lotNum">Enter lot number</Label>
									<Input
										className="mt-2"
										//defaultValue="634"
										type="number"
										{...register1("lotNum")}
									/>
								</div>

								<Button
									className="m-2"
									color="primary"
									type="submit"
									disabled={submitting}
								>
									Consume materal
								</Button>
							</form>
						</LstCard>
					</div>
					<div className="m-1 p-1">
						<LstCard>
							<div className="w-96 p-1">
								<ol>
									<li>
										1. Enter the running number of the material you would like
										to consume
									</li>
									<li>2. Enter the lot number you will be consuming to</li>
									<li>3. Press consume material</li>
								</ol>
								<p className="text-pretty w-96">
									*This process is only for barcoded material, if it is set to
									auto consume you will encounter and error.
								</p>
							</div>
						</LstCard>
					</div>
				</div>
			</LstCard>
		</div>
	);
}
