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

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

            try {
                const res = await axios.post("/api/ocp/bookin", {
                    runningNr: parseInt(value.runningNr),
                });

                if (res.data.success) {
                    toast.success(res.data.message);
                    form.reset();
                    setBookingIn(false);
                } else {
                    console.log(res.data.data.errors);
                    toast.error(res.data.data.errors[0]?.message);
                    form.reset();
                    setBookingIn(false);
                }
            } catch (error) {
                console.log(error);
                toast.error(
                    "There was an error booking in pallet please validate you entered the correct info and try again."
                );
                setBookingIn(false);
            }
        },
    });
    return (
        <LstCard>
            <CardHeader>
                <p>Book in a pallet by running number</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="m-2 min-w-48 max-w-96 p-2">
                                    <Label htmlFor="runningNr" className="mb-2">
                                        Runnning Number
                                    </Label>
                                    <Input
                                        name={field.name}
                                        value={field.state.value}
                                        onBlur={field.handleBlur}
                                        type="number"
                                        onChange={(e) =>
                                            field.handleChange(e.target.value)
                                        }
                                    />
                                    {field.state.meta.errors.length ? (
                                        <em>
                                            {field.state.meta.errors.join(",")}
                                        </em>
                                    ) : null}
                                </div>
                            );
                        }}
                    />
                </CardContent>
                <CardFooter>
                    <div className="flex justify-end">
                        <Button
                            onClick={form.handleSubmit}
                            disabled={bookingIn}
                        >
                            Book in
                        </Button>
                    </div>
                </CardFooter>
            </form>
        </LstCard>
    );
}