import { useForm } from "@tanstack/react-form";
import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import axios from "axios";
import { format } from "date-fns";
import { CircleAlert } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";

import { Button } from "../../../../../../components/ui/button";
import { CardHeader } from "../../../../../../components/ui/card";
import { Input } from "../../../../../../components/ui/input";
import { Label } from "../../../../../../components/ui/label";
import { LstCard } from "../../../../../../components/ui/lstCard";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "../../../../../../components/ui/tooltip";
import { useAuth, userAccess } from "../../../../../../lib/authClient";
import { getStockSilo } from "../../../-utils/querys/logistics/siloAdjustments/getStockSilo";
import { AttachSilo } from "./AttachSilo";
import ChartData from "./ChartData";
import { DetachSilo } from "./DetachSilo";

export default function SiloCard(data: any) {
	const [submitting, setSubmitting] = useState(false);
	const { refetch } = useQuery(getStockSilo());
	const { session } = useAuth();

	const silo = data.silo;

	// roles that can do the silo adjustments

	const form = useForm({
		defaultValues: {
			newLevel: "",
		},
		onSubmit: async ({ value }) => {
			setSubmitting(true);
			const dataToSubmit = {
				quantity: parseFloat(value.newLevel),
				warehouseId: silo.WarehouseID,
				laneId: silo.LocationID,
				username: session?.user.username,
				email: session?.user.email,
			};

			try {
				const res = await axios.post(
					"/lst/old/api/logistics/createsiloadjustment",
					dataToSubmit,
					{ withCredentials: true },
				);
				//console.log(res.data);

				if (res.data.success) {
					toast.success(res.data.message);
					refetch();
					form.reset();
				}
				if (!res.data.success && res.data.data?.status === 400) {
					if (res.data.data.status === 400) {
						toast.error(res.data.data.data.errors[0].message);
					}
				} else if (!res.data.success) {
					toast.error(res.data.message);
				}
				setSubmitting(false);
			} catch (error: any) {
				console.log(error);
				if (error.status === 401) {
					toast.error(error.response.statusText);
					setSubmitting(false);
				}
			}
		},
	});

	return (
		<LstCard>
			<div className="flex flex-row">
				<LstCard className="grow m-1 max-w-[400px]">
					<CardHeader>{silo.Description}</CardHeader>
					<div className="m-1">
						<hr className="m-2" />
						<span>Current Stock: </span>
						{silo.Stock_Total}
						<hr className="m-2" />
						<span>Last date adjusted </span>
						{format(silo.LastAdjustment, "M/dd/yyyy")}
						<hr className="m-2" />
					</div>
					<div>
						{silo.Stock_Total === 0 ? (
							<div className="flex justify-center flex-col">
								<span>
									The silo is currently empty you will not be able to do an
									adjustment until you have received material in.
								</span>
								<hr />
								<ul>
									<li>
										-Someone click "Take inventory on a empty location" in
										stock.
									</li>
									<li>
										-Silo virtually ran empty due to production over
										consumption.
									</li>
									<li>
										-Someone forgot to move a railcar compartment over to this
										location.
									</li>
								</ul>
							</div>
						) : (
							<>
								{session?.user &&
									userAccess("siloAdjustments", [
										"supervisor",
										"manager",
										"admin",
										"systemAdmin",
									]) && (
										<form
											onSubmit={(e) => {
												e.preventDefault();
												e.stopPropagation();
											}}
										>
											<form.Field
												name="newLevel"
												validators={{
													// We can choose between form-wide and field-specific validators
													onChange: ({ value }) =>
														value.length > 1
															? undefined
															: "You must enter a value greate than 1",
												}}
												children={(field) => {
													return (
														<div className="m-2 min-w-48 max-w-96 p-2">
															<div className="flex flex-row">
																<Label htmlFor="newLevel">New level</Label>
																<div>
																	<Disclaimer />
																</div>
															</div>
															<div className="flex flex-row">
																<Input
																	name={field.name}
																	value={field.state.value}
																	onBlur={field.handleBlur}
																	type="decimal"
																	onChange={(e) =>
																		field.handleChange(e.target.value)
																	}
																/>
																<Button
																	className="ml-1"
																	variant="outline"
																	type="submit"
																	onClick={form.handleSubmit}
																	disabled={submitting}
																>
																	{submitting ? (
																		<span className="w-24">Submitting...</span>
																	) : (
																		<span className="w-24">Submit</span>
																	)}
																</Button>
															</div>

															{field.state.meta.errors.length ? (
																<em>{field.state.meta.errors.join(",")}</em>
															) : null}
														</div>
													);
												}}
											/>
										</form>
									)}
							</>
						)}
					</div>
				</LstCard>
				<div className="grow max-w-[600px]">
					<ChartData laneId={silo.LocationID} />

					<div className="flex justify-end m-1 gap-3">
						<AttachSilo silo={silo} />
						<DetachSilo silo={silo} />
						<Button variant="outline">
							<Link
								to={"/old/siloAdjustments/$hist"}
								params={{ hist: silo.LocationID }}
							>
								Historical Data
							</Link>
						</Button>
					</div>
				</div>
			</div>
		</LstCard>
	);
}

const Disclaimer = () => {
	return (
		<TooltipProvider>
			<Tooltip>
				<TooltipTrigger asChild>
					<CircleAlert className="ml-1 w-[14px]" />
				</TooltipTrigger>
				<TooltipContent className="max-w-48">
					<p className="text-pretty">
						If you have had this page open for a period of time before
						submitting your data, there is a chance that the stock levels will
						be different from the ones you see above
					</p>
				</TooltipContent>
			</Tooltip>
		</TooltipProvider>
	);
};
