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 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 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(`/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>
    );
}