lst_v3/frontend/src/routes/transportation/opendock/-components/NewArticleLink.tsx

import { useQuery, useSuspenseQuery } from "@tanstack/react-query";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "../../../../components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
} from "../../../../components/ui/dialog";
import { api } from "../../../../lib/apiHelper";
import { useAppForm } from "../../../../lib/formSutff";
import { getActiveArticle } from "../../../../lib/queries/getActiveArticles";
import { getCustomerByAv } from "../../../../lib/queries/getCustomerByAv";

export default function NewArticleLink({ refetch }: { refetch: any }) {
	const [open, setOpen] = useState(false);
	const [selectedAv, setSelectedAv] = useState<string>("");
	const { data: articleData } = useSuspenseQuery(getActiveArticle());
	const {
		data: customerData,
		isPending,
		isLoading,
	} = useQuery(getCustomerByAv(selectedAv.split(" - ")[0]));

	const form = useAppForm({
		defaultValues: {
			av: "",
			description: "",
			customer: "",
			customerDescription: "",
			loadType: "",
			dock: "",
		},

		onSubmit: async ({ value }) => {
			const corrected = {
				av: parseInt(value.av.split(" - ")[0], 10),
				description: value.av.split(" - ")[1],
				customer: value.customer.split(" - ")[0],
				customerDescription: value.customer.split(" - ")[1],
				loadType: value.loadType,
				dock: value.dock,
			};

			try {
				const res = await api.post("/opendock/articleCheck", corrected, {
					validateStatus: () => true,
				});

				if (res.data.success) {
					toast.success(`The link for ${value.av} was just created :D`);
					refetch();
					form.reset();
					setSelectedAv("");
					setOpen(false);
				}

				if (!res.data.success) {
					toast.error(
						"The article customer combo are not allowed to be created twice please select a different customer.",
					);

					form.setFieldValue("customer", "");
					console.log(res.data);
					return;
				}
			} catch (error) {
				console.log(error);
			}
		},
	});

	const closeModel = (e: boolean) => {
		setOpen(e);

		if (!e) {
			form.reset();
			setSelectedAv("");
		}
	};

	const openForm = () => {
		setOpen(true);
		form.reset;
		setSelectedAv("");
	};

	let n: any = [];
	if (articleData) {
		n = articleData.map((i: any) => ({
			label: `${i.article} - ${i.Bezeichnung}`,
			value: `${i.article} - ${i.Bezeichnung}`,
		}));
	}

	let c: any = [];
	if ((selectedAv && !isPending) || !isLoading) {
		const cusData = customerData ?? [];
		c = cusData.map((i: any) => ({
			label: `${i.customer} - ${i.customerDescription}`,
			value: `${i.customer} - ${i.customerDescription}`,
		}));
	}

	// TODO: get this from lst as well once we get the actual docks in to link to.
	// this will be live || drop but also the actaul load types so we can have a little more refined times
	const loadType = [
		{
			label: "Live",
			value: "live",
		},
		{
			label: "Drop",
			value: "drop",
		},
	];

	//TODO: get the docks from lst to help refine and actually link the dock correctly
	const dock = [
		{
			label: "Default",
			value: "default",
		},
		{
			label: "Cermac",
			value: "cermac",
		},
		{
			label: "Gerber",
			value: "gerber",
		},
		{
			label: "Matrix",
			value: "matrix",
		},
		{
			label: "RB",
			value: "rb",
		},
	];

	return (
		<Dialog onOpenChange={(e) => closeModel(e)} open={open}>
			<Button onClick={openForm}>Create Article link</Button>

			<DialogContent showCloseButton={false} className="min-w-2xl">
				<DialogHeader>
					<DialogTitle>Create Article Link.</DialogTitle>
					<DialogDescription>
						Create the fine tuned per article setup, selecting an av will pull
						in only the sales prices for the av, After filling in the form all{" "}
						<p className="underline">NEW</p> release created will use this as
						the new default settings.
					</DialogDescription>
				</DialogHeader>

				<form
					onSubmit={(e) => {
						e.preventDefault();
						form.handleSubmit();
					}}
				>
					<div className="w-fit">
						<div className="w-fill">
							<form.AppField
								name="av"
								listeners={{
									onChange: ({ value }) => {
										setSelectedAv(value);

										if (form.getFieldValue("customer")) {
											form.setFieldValue("customer", "");
										}
									},
								}}
							>
								{(field) => (
									<field.SelectField
										label="Select Article"
										placeholder="Select av to link"
										options={n}
									/>
								)}
							</form.AppField>
						</div>
					</div>

					<div className="w-fit">
						<div className="w-fill">
							<form.AppField name="customer">
								{(field) => (
									<field.SelectField
										label="Select Customer"
										placeholder={
											!selectedAv
												? "Select AV first"
												: isLoading
													? "Loading customers..."
													: c.length === 0
														? "No customers to select"
														: "Select customer"
										}
										options={c}
										disabled={!selectedAv || (isLoading && c.length > 0)}
									/>
								)}
							</form.AppField>
						</div>
					</div>
					<div className=" flex flex-row w-fit mt-3">
						<div className="w-fill">
							<form.AppField name="loadType">
								{(field) => (
									<field.SelectField
										label="Select Load Type"
										placeholder={"Select LoadType"}
										options={loadType}
										disabled={!selectedAv}
									/>
								)}
							</form.AppField>
						</div>
						<div className="w-fill">
							<form.AppField name="dock">
								{(field) => (
									<field.SelectField
										label="Select Dock"
										placeholder={"Select dock"}
										options={dock}
										disabled={!selectedAv}
									/>
								)}
							</form.AppField>
						</div>
					</div>

					<div className="flex justify-end mt-2 ">
						<form.AppForm>
							<form.SubmitButton>Submit</form.SubmitButton>
						</form.AppForm>
					</div>
				</form>
			</DialogContent>
		</Dialog>
	);
}