import axios from "axios";
import { Info } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
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 {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import { useAppForm } from "@/lib/formStuff";
import { useSettingStore } from "@/routes/_old/old/-lib/store/useSettings";
import { LstCard } from "../../../extendedUi/LstCard";

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 === "plantToken");
	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("/lst/old/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
																			transferring 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}prod.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>
	);
}
