import {LstCard} from "@/components/extendedUI/LstCard";
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 {useSessionStore} from "@/lib/store/sessionStore";
import axios from "axios";
import {useState} from "react";

import {useForm} from "react-hook-form";
import {toast} from "sonner";

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

    const handleConsume = async (data: any) => {
        setSubmitting(!submitting);
        try {
            const result = await axios.post(`/api/logistics/consume`, data, {
                headers: {Authorization: `Bearer ${token}`},
            });
            if (result.data.success) {
                toast.success(result.data.message);
                setSubmitting(!submitting);
                reset();
            }
            if (!result.data.success) {
                //console.log(result.data);
                setSubmitting(!submitting);
                toast.error(result.data.message);
            }
        } catch (error: any) {
            //console.log(error);
            setSubmitting(!submitting);
            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>
    );
}