import { LstCard } from "@/components/extendedUI/LstCard";
import { Button } from "@/components/ui/button";
import { CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAppForm } from "@/utils/formStuff";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";
import { Info } from "lucide-react";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import { useSettingStore } from "@/lib/store/useSettings";

export default function TransferToNextLot() {
    const [gaylordFilled, setGaylordFilled] = useState([0]);
    const [actualAmount, setActualAmount] = useState(0);
    const [tab, setTab] = useState("esitmate");
    const [typeSwitch, setTypeSwitch] = useState(false);
    const { settings } = useSettingStore();

    const server = settings.filter((n: any) => n.name === "dbServer");
    const form = useAppForm({
        defaultValues: {
            runningNumber: "",
            lotNumber: "",
            originalAmount: "",
            amount: "",
        },
        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", {
                    runningNumber: Number(value.runningNumber),
                    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
                    ),
                    amount: actualAmount,
                    type: typeSwitch ? "eom" : "lot",
                });

                if (res.data.success) {
                    toast.success(`${res.data.message}`);
                    form.reset();
                    setGaylordFilled([0]);
                    setActualAmount(0);
                }
                //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="">
                                    <Tabs
                                        defaultValue={tab}
                                        onValueChange={setTab}
                                    >
                                        <TabsList>
                                            <TabsTrigger value="esitmate">
                                                Estimate Amount
                                            </TabsTrigger>
                                            <TabsTrigger value="actual">
                                                Actual Amount
                                            </TabsTrigger>
                                        </TabsList>

                                        <TabsContent value="esitmate">
                                            <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 - 95%
                                                    </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 full - 75%
                                                    </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 - 50%
                                                    </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 - 25%
                                                    </p>
                                                </button>
                                            </div>
                                            <div className="flex justify-end pr-1">
                                                <Button
                                                    onClick={() =>
                                                        setGaylordFilled([0])
                                                    }
                                                >
                                                    Reset Gaylord
                                                </Button>
                                            </div>
                                        </TabsContent>
                                        <TabsContent
                                            value="actual"
                                            className="w-96"
                                        >
                                            <CardHeader>
                                                <p>
                                                    Enter the total amount of
                                                    the cage/gaylord
                                                </p>
                                            </CardHeader>
                                            <CardContent>
                                                <Input
                                                    type="number"
                                                    //placeholder="35"
                                                    onChange={(e) =>
                                                        setActualAmount(
                                                            Number(
                                                                e.target.value
                                                            )
                                                        )
                                                    }
                                                />
                                            </CardContent>
                                        </TabsContent>
                                    </Tabs>
                                </LstCard>
                            </div>
                            <div>
                                <div className="w-96">
                                    <LstCard>
                                        <form
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                form.handleSubmit();
                                            }}
                                        >
                                            <div className="mt-3 p-2">
                                                <form.AppField
                                                    name="runningNumber"
                                                    children={(field) => (
                                                        <field.InputField
                                                            label="Running 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}
                                                        />
                                                    )}
                                                />
                                                {tab !== "actual" && (
                                                    <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-between  p-2">
                                                <div className="flex items-center space-x-2">
                                                    <Switch
                                                        checked={typeSwitch}
                                                        onCheckedChange={
                                                            setTypeSwitch
                                                        }
                                                    />
                                                    <span>
                                                        {typeSwitch ? (
                                                            <div className="flex items-center space-x-2">
                                                                <span>
                                                                    "EOM
                                                                    Transfer"
                                                                </span>
                                                                <Tooltip>
                                                                    <TooltipTrigger>
                                                                        <Info className="h-[16px] w-[16px]" />
                                                                    </TooltipTrigger>
                                                                    <TooltipContent>
                                                                        <p>
                                                                            Click
                                                                            the
                                                                            toggle
                                                                            if
                                                                            you
                                                                            will
                                                                            be
                                                                            transfering
                                                                            at
                                                                            EOM,
                                                                            NOTE:
                                                                            This
                                                                            will
                                                                            trigger
                                                                            the
                                                                            delayed
                                                                            transfer.
                                                                        </p>
                                                                    </TooltipContent>
                                                                </Tooltip>
                                                            </div>
                                                        ) : (
                                                            <div className="flex items-center space-x-2">
                                                                <span>
                                                                    "Lot
                                                                    Transfer"
                                                                </span>
                                                                <Tooltip>
                                                                    <TooltipTrigger>
                                                                        <Info className="h-[16px] w-[16px]" />
                                                                    </TooltipTrigger>
                                                                    <TooltipContent>
                                                                        <p>
                                                                            Click
                                                                            the
                                                                            toggle
                                                                            if
                                                                            you
                                                                            will
                                                                            be
                                                                            transfering
                                                                            at
                                                                            EOM,
                                                                            NOTE:
                                                                            This
                                                                            will
                                                                            trigger
                                                                            the
                                                                            delayed
                                                                            transfer.
                                                                        </p>
                                                                    </TooltipContent>
                                                                </Tooltip>
                                                            </div>
                                                        )}
                                                    </span>
                                                </div>

                                                <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>
                                {tab !== "actual" ? (
                                    <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>
                                        <br />
                                        {settings.length > 0 && (
                                            <p>
                                                For more in depth instructions
                                                please{" "}
                                                <a
                                                    href={`https://${server[0].value}.alpla.net/lst/d/docs/ocp/ocp#tranfer-partial-estimated-quantity-to-the-next-lot`}
                                                    target="_blank"
                                                >
                                                    <em>CLICK HERE</em>
                                                </a>
                                            </p>
                                        )}
                                    </div>
                                ) : (
                                    <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. Take the gaylord to the scale
                                                and weight it
                                            </li>
                                            <li>
                                                4. Enter the weight of the
                                                gaylord minus the tar weight.
                                            </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>
                                            NOTE: This is not the return
                                            process, this process will just get
                                            the gaylord to the next lot.
                                        </p>
                                        <br />
                                        {settings.length > 0 && (
                                            <p>
                                                For more in depth instructions
                                                please{" "}
                                                <a
                                                    href={`https://${server[0].value}.alpla.net/lst/d/docs/ocp/ocp#tranfer-partial-estimated-quantity-to-the-next-lot`}
                                                    target="_blank"
                                                >
                                                    <em>CLICK HERE</em>
                                                </a>
                                            </p>
                                        )}
                                    </div>
                                )}
                            </LstCard>
                        </div>
                    </div>
                </div>
            </LstCard>
        </div>
    );
}