"use client";

import { Button } from "@/components/ui/button";
import { deviceCartAtom } from "@/lib/atoms";
import { useAtomValue } from "jotai";
import { MonitorSmartphone } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";

export function DeviceCartDrawer() {
	const pathname = usePathname();
	const devices = useAtomValue(deviceCartAtom);
	const router = useRouter();

	if (pathname === "/payment" || pathname === "/devices-to-pay") {
		return null;
	}

	if (devices.length === 0) return null;
	return (
		<Button
			size={"lg"}
			className="bg-sarLinkOrange absolute bottom-10  w-fit z-20 left-1/2 transform -translate-x-1/2"
			onClick={() => router.push("/devices-to-pay")}
			variant="outline"
		>
			<MonitorSmartphone />
			Pay {devices.length > 0 && `(${devices.length})`} Device
		</Button>
	);

	//   <>
	//     <Drawer open={isOpen} onOpenChange={setIsOpen}>
	//       <DrawerTrigger asChild>
	//         <Button size={"lg"} className="bg-sarLinkOrange absolute bottom-10  w-fit z-20 left-1/2 transform -translate-x-1/2" onClick={() => setIsOpen(!isOpen)} variant="outline">
	//           <MonitorSmartphone />
	//           Pay {devices.length > 0 && `(${devices.length})`} Device
	//         </Button>
	//       </DrawerTrigger>
	//       <DrawerContent>
	//         <div className="mx-auto w-full max-w-sm">
	//           <DrawerHeader>
	//             <DrawerTitle>Selected Devices</DrawerTitle>
	//             <DrawerDescription>Selected devices pay.</DrawerDescription>
	//           </DrawerHeader>
	//           <div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
	//             <pre>{JSON.stringify(isOpen, null, 2)}</pre>
	//             {devices.map((device) => (
	//               <DeviceCard key={device.id} device={device} />
	//             ))}
	//           </div>
	//           <div className="px-4 flex flex-col gap-4">
	//             <NumberInput
	//               label="Set No of Months"
	//               value={months}
	//               onChange={(value) => setMonths(value)}
	//               maxAllowed={12}
	//               isDisabled={devices.length === 0}
	//             />
	//             {message && (
	//               <span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
	//                 {message}
	//               </span>
	//             )}
	//           </div>
	//           <DrawerFooter>
	//             <Button
	//               onClick={async () => {
	//                 setDisabled(true);
	//                 toast.promise(
	//                   createPayment(data).then((result) => {
	//                     if (result.success) {
	//                       setDeviceCart([]);
	//                       setMonths(1);
	//                       setDisabled(false);
	//                       if (isOpen) router.push(`/payments/${result.paymentId}`);
	//                       setIsOpen(!isOpen);
	//                       return "Payment created!";
	//                     }
	//                   }),
	//                   {
	//                     loading: "Processing payment...",
	//                     success: "Payment created!",
	//                     error: (err) => err.message || "Something went wrong.",
	//                   }
	//                 );
	//               }}
	//               className="w-full"
	//               disabled={devices.length === 0 || disabled}
	//             >
	//               {disabled ? (
	//                 <>
	//                   <Loader2 className="ml-2 animate-spin" />
	//                 </>
	//               ) : (
	//                 <>
	//                   Go to payment
	//                   <CircleDollarSign />
	//                 </>
	//               )}
	//             </Button>
	//             <DrawerClose asChild>
	//               <Button variant="outline">Cancel</Button>
	//             </DrawerClose>
	//             <Button
	//               onClick={() => {
	//                 setDeviceCart([]);
	//                 setIsOpen(!isOpen);
	//               }}
	//               variant="outline"
	//             >
	//               Clear Selection
	//             </Button>
	//           </DrawerFooter>
	//         </div>
	//       </DrawerContent>
	//     </Drawer>
	//   </>

	// );
}
