import { useForm } from "@tanstack/react-form";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import axios from "axios";
import { toast } from "sonner";
import { Button } from "../ui/button";
import { useState } from "react";

export default function ManuallyEnterRn() {
    const [sending, setSendingRn] = useState(false);
    const form = useForm({
        defaultValues: {
            runningNr: "",
        },
        onSubmit: async ({ value }) => {
            console.log(value);
            setSendingRn(true);
            try {
                const res = await axios.post("/ocme/api/v1/postRunningNumber", {
                    runningNr: value.runningNr,
                    areaFrom: "wrapper_1",
                    completed: true,
                });

                if (res.data.success) {
                    form.reset();
                    toast.success(
                        `${value.runningNr} was just created please login`
                    );
                    setTimeout(() => {
                        setSendingRn(false);
                    }, 3 * 1000);
                }

                if (!res.data.success) {
                    toast.error(res.data.message);
                    setTimeout(() => {
                        setSendingRn(false);
                    }, 3 * 1000);
                }
            } catch (error) {
                //console.log(error);
                toast.error("There was an error registering");
                setTimeout(() => {
                    setSendingRn(false);
                }, 3 * 1000);
            }
        },
    });
    return (
        <div>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    //e.stopPropagation();
                }}
            >
                <form.Field
                    name="runningNr"
                    validators={{
                        // We can choose between form-wide and field-specific validators
                        onChange: ({ value }) =>
                            value.length > 3
                                ? undefined
                                : "pallet number must be greater than 4 numbers",
                    }}
                    children={(field) => {
                        return (
                            <div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
                                <div>
                                    <Label htmlFor="runningNr" className="mb-2">
                                        Running 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>
                                <div className="ml-1 mt-5">
                                    <Button
                                        className="ml-1"
                                        type="submit"
                                        onClick={form.handleSubmit}
                                        disabled={sending}
                                    >
                                        Submit
                                    </Button>
                                </div>
                            </div>
                        );
                    }}
                />
            </form>
        </div>
    );
}