import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";

import { useAppForm } from "@/utils/formStuff";
import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";

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(
                    "/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>
    );
}