import { LstCard } from "@/components/extendedUI/LstCard";
import { Button } from "@/components/ui/button";
import { CardHeader } from "@/components/ui/card";
import { useAppForm } from "@/utils/formStuff";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";

export default function TransferToNextLot() {
    const [gaylordFilled, setGaylordFilled] = useState([0]);

    const form = useAppForm({
        defaultValues: {
            runnungNumber: "",
            lotNumber: "",
            originalAmount: "",
        },
        onSubmit: async ({ value }) => {
            //console.log(transferData);
            //toast.success("603468: qty: 361, was transfered to lot:24897");
            try {
                const res = await axios.post("/api/ocp/materiallottransfer", {
                    runnungNumber: Number(value.runnungNumber),
                    lotNumber: Number(value.lotNumber),
                    originalAmount: Number(value.originalAmount),
                    level: Number(
                        gaylordFilled.length === 1
                            ? 0.25
                            : gaylordFilled.length === 2
                              ? 0.5
                              : gaylordFilled.length === 3
                                ? 0.75
                                : gaylordFilled.length === 4 && 0.95
                    ),
                });

                if (res.data.success) {
                    toast.success(`${res.data.message}`);
                    form.reset();
                }
                //console.log(res.data);

                if (!res.data.success) {
                    toast.error(res.data.message);
                }
            } catch (error) {
                if (error) {
                    console.log(error);
                    //toast.error(error)
                }
            }
        },
    });
    return (
        <div>
            <LstCard>
                <CardHeader>
                    <p className="text-center text-lg">
                        Material Transfer to Next lot
                    </p>
                </CardHeader>
                <div>
                    <div className="flex flex-wrap m-2 gap-2">
                        <div className="flex gap-2">
                            <div>
                                <LstCard className="">
                                    <div className="grid columns-1">
                                        <button
                                            className={`box-border h-16 w-96 border-3 ${
                                                gaylordFilled.includes(4)
                                                    ? " bg-green-500"
                                                    : ""
                                            }`}
                                            onClick={() =>
                                                setGaylordFilled([1, 2, 3, 4])
                                            }
                                        >
                                            <p className="text-center">
                                                Almost full
                                            </p>
                                        </button>
                                        <button
                                            className={`box-border h-16 w-96 border-3 ${
                                                gaylordFilled.includes(3)
                                                    ? " bg-green-500"
                                                    : ""
                                            }`}
                                            onClick={() =>
                                                setGaylordFilled([1, 2, 3])
                                            }
                                        >
                                            <p className="text-center">
                                                About 75% full
                                            </p>
                                        </button>
                                        <button
                                            className={`box-border h-16 w-96 border-3 ${
                                                gaylordFilled.includes(2)
                                                    ? " bg-green-500"
                                                    : ""
                                            }`}
                                            onClick={() =>
                                                setGaylordFilled([1, 2])
                                            }
                                        >
                                            <p className="text-center">
                                                Half full
                                            </p>
                                        </button>
                                        <button
                                            className={`box-border h-16 w-96 border-3 ${
                                                gaylordFilled.includes(1)
                                                    ? " bg-green-500"
                                                    : ""
                                            }`}
                                            onClick={() =>
                                                setGaylordFilled(() => [1])
                                            }
                                        >
                                            <p className="text-center">
                                                Almost empty
                                            </p>
                                        </button>
                                    </div>
                                    <div className="flex justify-end pr-1">
                                        <Button
                                            onClick={() =>
                                                setGaylordFilled([0])
                                            }
                                        >
                                            Reset Gaylord
                                        </Button>
                                    </div>
                                </LstCard>
                            </div>
                            <div>
                                <div className="w-96">
                                    <LstCard>
                                        <form
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                form.handleSubmit();
                                            }}
                                        >
                                            <div className="mt-3 p-2">
                                                <form.AppField
                                                    name="runnungNumber"
                                                    children={(field) => (
                                                        <field.InputField
                                                            label="Runnung Number"
                                                            inputType="number"
                                                            required={true}
                                                        />
                                                    )}
                                                />
                                            </div>
                                            <div className="mt-3  p-2">
                                                <form.AppField
                                                    name="lotNumber"
                                                    children={(field) => (
                                                        <field.InputField
                                                            label="Lot Number"
                                                            inputType="number"
                                                            required={true}
                                                        />
                                                    )}
                                                />
                                                <div className="mt-3  p-2">
                                                    <form.AppField
                                                        name="originalAmount"
                                                        children={(field) => (
                                                            <field.InputField
                                                                label="Orignal Quantity"
                                                                inputType="number"
                                                                required={true}
                                                            />
                                                        )}
                                                    />
                                                </div>
                                            </div>
                                            <div className="flex justify-end  p-2">
                                                <form.AppForm>
                                                    <form.SubmitButton>
                                                        Transfer To Lot
                                                    </form.SubmitButton>
                                                </form.AppForm>
                                            </div>
                                        </form>
                                    </LstCard>
                                </div>
                            </div>
                        </div>
                        <div>
                            <LstCard className="p-2">
                                <CardHeader>
                                    <p className="text-center text-lg">
                                        Moving material to the next lot.
                                    </p>
                                </CardHeader>

                                <div>
                                    <ol>
                                        <li>
                                            1. Grab the gaylord running number
                                            from the gaylord at the line/next to
                                            the tschritter
                                        </li>
                                        <li>
                                            2. Grab the next lot number you are
                                            going to be running (or the one that
                                            state no Main material prepared)
                                        </li>
                                        <li>
                                            3. Enter the total gaylord weight
                                            (this is how much the gaylord
                                            weighed when it came in from the
                                            supplier.)
                                        </li>
                                        <li>
                                            4. *Click the level of the gaylord
                                            (this is just an estimate to move to
                                            the next lot.)
                                        </li>
                                        <li>
                                            5. type in running number on the
                                            gaylord.
                                        </li>
                                        <li>6. Type in the new lot number.</li>
                                        <li>7. Press "Transfer To Lot"</li>
                                    </ol>
                                    <br></br>
                                    <p>
                                        * to reduce the time needed to get the
                                        lot going we will use an estimate of how
                                        full the gaylord is.
                                    </p>
                                    <p>
                                        NOTE: This is not the return process,
                                        this process will just get the gaylord
                                        to the next lot.
                                    </p>
                                </div>
                            </LstCard>
                        </div>
                    </div>
                </div>
            </LstCard>
        </div>
    );
}