"use client";

import { Button } from "@/components/ui/button";
import {
  deviceCartAtom
} from "@/lib/atoms";
import { authClient } from "@/lib/auth-client";
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>
  //   </>

  // );
}