'use client'
import { trpc } from "@/app/_trpc/client"
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@/components/ui/alert-dialog"
  import { Button } from "@/components/ui/button"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import useActivateDisableUser from "../hooks/useActivateDisableUser"
  
  interface AlertBanUnbanUserProps{
    userId:string
  }

  export function AlertBanUnbanUser({userId}:AlertBanUnbanUserProps) {

    const {banUser}=useActivateDisableUser()


    return (
      <AlertDialog>
        <AlertDialogTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Desactivar</DropdownMenuItem>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Esta seguro que quiere desactivar este usuario?</AlertDialogTitle>
            <AlertDialogDescription>
              Este usuario no podra iniciar seccion hasta que sea activado nuevamente.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction>
                <button disabled={banUser.isPending} type="button" onClick={()=>banUser.mutate({userId})}>Confirmar</button>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    )
  }