import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import Barcode from "react-barcode";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { getLanes } from "../../../-utils/querys/logistics/getWarehouseLanes";
import { LstCard } from "../../extendedUi/LstCard";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
import CommonCommands from "./CommonCommands";

export default function BGPage() {
	const { data, isError, isLoading } = useQuery(getLanes());
	const [checked, setChecked] = useState([]);

	if (isLoading) return <div>Loading Data</div>;

	if (isError)
		return <div>There was an error getting the warehouse lane data.</div>;

	/**
	 * get the warehouse names only
	 */

	const warhouses = new Map();

	data?.forEach((item: any) => {
		// if the warhouse is not already included add it to the map
		if (!warhouses.has(item.warehouseId)) {
			warhouses.set(item.warehouseId, item.warehouseDescription);
		}
	});

	// convert the map to an array
	const warehouseArray = Array.from(warhouses).map(([wid, wname]) => ({
		warehouseId: wid,
		warehouseDescription: wname,
	}));

	//console.log(warehouseArray);

	// handle the onchange
	const changeBox = (d: any) => {
		setChecked((prev: any) => {
			if (prev.includes(d)) {
				return prev.filter((name: any) => name !== d);
			} else {
				return [...prev, d];
			}
		});
	};

	return (
		<div className="flex flex-row m-2">
			<div className="flex flex-row">
				<div className="m-2">
					<LstCard>
						<CardHeader>Warehouse Barcodes</CardHeader>
						<CardContent>
							{warehouseArray.map((i: any) => {
								const lanes = data?.filter(
									(wid: any) => wid.warehouseId === i.warehouseId,
								);
								return (
									<div className="m-2" key={i.warehouseId}>
										<Collapsible>
											<CollapsibleTrigger>
												{i.warehouseDescription}
											</CollapsibleTrigger>
											<CollapsibleContent>
												<div className="ml-2">
													{lanes?.map((l: any) => {
														return (
															<div key={l.laneId}>
																<Checkbox
																	id={l.laneId}
																	// checked={checked.includes(
																	//     l
																	// )}
																	onCheckedChange={() => changeBox(l)}
																/>
																<label id={l.laneId} className="ml-2">
																	{l.laneDescription}
																</label>
															</div>
														);
													})}
												</div>
											</CollapsibleContent>
										</Collapsible>
									</div>
								);
							})}
						</CardContent>
					</LstCard>
				</div>
				{checked.length > 0 && (
					<div className="m-2">
						<LstCard>
							<CardHeader>Current selected lanes</CardHeader>
							<CardContent>
								{checked.map((c: any) => {
									return (
										<div
											className="flex justify-center"
											key={`${c.warehouseId}-${c.laneId}`}
										>
											<div>
												<Barcode
													value={`loc#${c.warehouseId}#${c.laneId}`}
													width={2}
													height={50}
													displayValue={false}
												/>
												<p className="flex justify-center">
													Lane: {c.laneDescription}
												</p>
											</div>
											<div className="ml-2 mt-4">
												<BarcodePDFExport
													barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
													data={c}
												/>
											</div>
										</div>
									);
								})}
							</CardContent>
							<CardFooter>
								<div className="flex justify-end">
									{checked.length > 1 && (
										<div>
											<BulkBarcodePDFExport data={checked} />
										</div>
									)}
								</div>
							</CardFooter>
						</LstCard>
					</div>
				)}
			</div>
			<div className="m-2">
				<CommonCommands />
			</div>
		</div>
	);
}
