//import { useMutation } from "@tanstack/react-query";
//import { Button } from "../../components/ui/button";
import { Separator } from "../../components/ui/separator";

// image imports
const images = import.meta.glob(
	"/public/imgs/docs/mobile/*.{png,jpg,jpeg,webp}",
	{
		eager: true,
		query: "w=300;600;1200&format=webp",
		import: "default",
	},
) as Record<string, string>;

const server = window.LST_CONFIG?.server;

const firstScan = images[`/public/imgs/docs/mobile/${server}-1.png`];
const secondScan = images[`/public/imgs/docs/mobile/${server}-2.png`];
const thirdScan = images[`/public/imgs/docs/mobile/${server}-3.png`];

export default function UpdateInstructions() {
	// const getFile = useMutation({
	// 	mutationFn: async () => {
	// 		// 1. Fetch the file from the public folder
	// 		const response = await fetch(
	// 			`/lst/app/stage-now/${window.LST_CONFIG?.server}-stageNow.pdf`,
	// 		);
	// 		if (!response.ok) throw new Error("Network response was not ok");

	// 		// 2. Convert to blob
	// 		return await response.blob();
	// 	},
	// 	onSuccess: (blob) => {
	// 		// 3. Create a temporary anchor element to trigger download
	// 		const url = window.URL.createObjectURL(blob);
	// 		const a = document.createElement("a");
	// 		a.href = url;
	// 		a.download = `${window.LST_CONFIG?.server}-stageNow.pdf`; // Desired filename
	// 		document.body.appendChild(a);
	// 		a.click();

	// 		// 4. Cleanup
	// 		window.URL.revokeObjectURL(url);
	// 		document.body.removeChild(a);
	// 	},
	// });

	return (
		<div className="flex flex-row gap-2">
			<div className="w-1/2">
				<div className="flex flex-col gap-1 justify-center">
					<div>
						<p className="text-center text-3xl">
							Updating the lst mobile scanner app
						</p>
						<p className="text-center text-sm">
							NOTE: LST Mobile only works on TC8300
						</p>
					</div>
					{/* <div className="flex justify-center">
						<Button
							onClick={() => getFile.mutate()}
							disabled={getFile.isPending}
						>
							{getFile.isPending ? "Downloading..." : "Get StageNow Codes"}
						</Button>
					</div> */}
				</div>
				<Separator className="m-3" />
				<div>
					<p className="text-2xl text-center">
						How to know the scanner has an update?
					</p>
					<p>
						The bottom part of the scanner will show a red or orange bar
						indicating there is an update. As shown below
					</p>
					<div className="flex flex-row gap-2 justify-center">
						<div className="w-1/2">
							<img
								src="/lst/app/imgs/docs/mobile/critical_update.png"
								alt="Home"
								className="max-w-[50%] h-auto"
							/>
						</div>

						<div className="w-1/2">
							<img
								src="/lst/app/imgs/docs/mobile/update.png"
								alt="Home"
								className="max-w-[50%] h-auto"
							/>
						</div>
					</div>
				</div>

				<Separator className="m-3" />
				<div>
					<p className="text-2xl text-center">
						To update the scanner follow the below steps.
					</p>
					<p>Step 1) Tap the 3 dots top right of the home screen</p>
					<img
						src="/lst/app/imgs/docs/mobile/ehs_homeScreen.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>Step 2) Tap tools</p>
					<img
						src="/lst/app/imgs/docs/mobile/ehs_menu.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>Step 3) Tap Stage Now</p>
					<img
						src="/lst/app/imgs/docs/mobile/tools.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
					<p>
						Step 4) Scan the 3 barcode's to the right or from the printed sheet
					</p>
					<img
						src="/lst/app/imgs/docs/mobile/stagenow.png"
						alt="Home"
						className="max-w-[25%] h-auto m-3"
					/>
				</div>
			</div>
			<div className="w-1/2">
				<p>Scan Commands</p>
				<Separator className="m-3" />
				<div className="flex flex-col justify-center">
					<img src={firstScan} alt="First Scan" className="m-3" />
					<img src={secondScan} alt="Second Scan" className="m-3" />
					<img src={thirdScan} alt="Third Scan" className="m-3" />
				</div>
			</div>
		</div>
	);
}