import { useState } from "react";
import Barcode from "react-barcode";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { LstCard } from "../../extendedUi/LstCard";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";

const commoncmd = [
	{ name: "Relocate", commandId: 33 },
	//-{ name: "Stock in", commandId: 22 },
];
export default function CommonCommands() {
	const [checked, setChecked] = useState([]);

	// 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>
			<div>
				<LstCard>
					<CardHeader>Common Barcodes</CardHeader>
					<CardContent>
						{commoncmd.map((i: any) => {
							return (
								<div className="flex flex-row">
									<div>
										<Checkbox
											id={i.commandId}
											// checked={checked.includes(
											//     l
											// )}
											onCheckedChange={() => changeBox(i)}
										/>
										<label id={i.commandId} className="ml-2">
											{i.name}
										</label>
									</div>
								</div>
							);
						})}
					</CardContent>
				</LstCard>
			</div>

			<div>
				{checked.length > 0 && (
					<div className="m-2">
						<LstCard>
							<CardHeader>Current selected Barcodes</CardHeader>
							<CardContent>
								{checked.map((c: any) => {
									return (
										<div className="flex justify-center" key={`${c.name}`}>
											<div>
												<Barcode
													value={`AlplaPRODcmd${c.commandId}`}
													width={2}
													height={50}
													displayValue={false}
												/>
												<p className="flex justify-center">Bacrode: {c.name}</p>
											</div>
											<div className="ml-2 mt-4">
												<BarcodePDFExport
													barcodeValue={`AlplaPRODcmd${c.commandId}`}
													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>
	);
}
