'use client'
import {
  TableCell,
  TableRow
} from "@/components/ui/table";
import { deviceCartAtom } from "@/lib/atoms";
import { cn } from "@/lib/utils";
import type { Device } from "@prisma/client";
import { useAtom } from "jotai";
import Link from 'next/link';
import AddDevicesToCartButton from "./add-devices-to-cart-button";
import BlockDeviceDialog from "./block-device-dialog";
export default function ClickableRow({ device, parentalControl, admin = false }: { device: Device, parentalControl?: boolean, admin?: boolean }) {
  const [devices, setDeviceCart] = useAtom(deviceCartAtom)


  return (
    <TableRow
      key={device.id}
      className={cn(parentalControl === false && "cursor-pointer hover:bg-muted",)}
      onClick={() => {

        if (parentalControl === true) return
        setDeviceCart((prev) =>
          devices.some((d) => d.id === device.id)
            ? prev.filter((d) => d.id !== device.id)
            : [...prev, device]
        )
      }}
    >
      <TableCell>
        <div className="flex flex-col items-start">
          <Link
            className="font-medium hover:underline"
            href={`/devices/${device.id}`}
            onClick={(e) => e.stopPropagation()}
          >
            {device.name}
          </Link>
          <span className="text-muted-foreground">
            Active until{" "}
            {new Date(device.expiryDate || "").toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
              year: "numeric",
            })}
          </span>
          {(device.blockedBy === "ADMIN" && device.blocked) && (
            <div className="p-2 rounded border my-2">
              <span>Comment: </span>
              <p className="text-neutral-500">
                {device?.reasonForBlocking}
              </p>
            </div>
          )}
        </div>
      </TableCell>
      <TableCell className="font-medium">{device.mac}</TableCell>
      <TableCell>
        {!parentalControl ? (
          <AddDevicesToCartButton device={device} />
        ) : (
          <BlockDeviceDialog admin={admin} type={device.blocked ? "unblock" : "block"} device={device} />
        )}
      </TableCell>
    </TableRow >
  )
}