import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "../../../../../../components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "../../../../../../components/ui/dialog";
import { useAppForm } from "../../../../../../lib/formStuff";
import { getMachineConnected } from "../../../-utils/querys/logistics/machineConnected";
import { getMachineNotConnected } from "../../../-utils/querys/logistics/notConnected";

export function DetachSilo(props: any) {
	const [open, setOpen] = useState(false);
	const { data, isError, isLoading, refetch } = useQuery(
		getMachineConnected({
			siloID: props.silo.LocationID,
			connectionType: "connected",
		}),
	);

	const { refetch: notConnected } = useQuery(
		getMachineNotConnected({
			siloID: props.silo.LocationID,
			connectionType: "detached",
		}),
	);

	const form = useAppForm({
		defaultValues: {
			laneId: props.silo.LocationID,
			machineId: 0,
		},
		onSubmit: async ({ value }) => {
			try {
				const res = await axios.post(
					"/lst/old/api/logistics/detachsilo",
					value,
				);

				if (res.status === 200) {
					console.log(res.data.data);
					toast.success(res.data.message);

					refetch();
					notConnected();
					form.reset();
					setOpen(!open);
				} else {
					console.log(res.data);
					toast.error(res.data.message);
					refetch();
					form.reset();
					setOpen(!open);
				}
			} catch (error) {
				console.log(error);
				toast.error(
					"There was an error detaching the silo please try again, if persist please enter a helpdesk ticket.",
				);
			}
		},
	});

	if (isError)
		return (
			<div>
				<p>There was an error loading data</p>
			</div>
		);

	if (isLoading)
		return (
			<div>
				<p>Loading....</p>
			</div>
		);

	// convert the array that comes over to label and value
	const tranMachine = data.map((i: any) => ({
		value: i.machineId.toString(),
		label: i.name,
	}));
	return (
		<Dialog open={open}>
			<DialogTrigger asChild>
				<Button
					variant="outline"
					onClick={() => setOpen(!open)}
					disabled={data.length === 0}
				>
					Detach Silo
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<form
					onSubmit={(e) => {
						e.preventDefault();
						form.handleSubmit();
					}}
				>
					<DialogHeader>
						<DialogTitle>Attach silo for: {props.silo.Description}</DialogTitle>
						<DialogDescription>
							Select the machine you would like to detach.
						</DialogDescription>
					</DialogHeader>
					<div className="grid gap-4">
						<div className="grid gap-3">
							<div className="mt-2">
								<form.AppField
									name="machineId"
									children={(field) => (
										<field.SelectField
											label="Select Machine"
											options={tranMachine}
										/>
									)}
								/>
							</div>
						</div>
					</div>
					<DialogFooter>
						<DialogClose asChild>
							<Button variant="outline" onClick={() => setOpen(!open)}>
								Cancel
							</Button>
						</DialogClose>
						<form.AppForm>
							<form.SubmitButton>Detach</form.SubmitButton>
						</form.AppForm>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	);
}
