"use client";
import { trpc } from "@/app/_trpc/client";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { buttonVariants } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { formatDate } from "@/lib/utils";
import Link from "next/link";
import { UserOptiosnDropdown } from "./UserOptionsDropdown";
import UpdateUserSidebar from "./UpdateUserSidebar";
import useGetUsers from "../hooks/useGetUsers";

const UserList = () => {
  const {users,handleDeleteUser,handleUpdateUser}=useGetUsers()

  return (
    <div className="">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="min-w-[150px]">Nombre</TableHead>
            <TableHead className="min-w-[170px]">Creado en</TableHead>
            <TableHead className="">Estado</TableHead>
            <TableHead>Rol</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody className=" overflow-x-auto">
          {users?.map((user) => (
            <TableRow key={user?.id}>
              <TableCell className="flex  items-center">
                <Avatar>
                  {/* <AvatarImage src="https://github.com/shadcn.png" alt="user profile image" /> */}
                  <AvatarFallback className=" uppercase">
                    {`${user?.firstName?.slice(0, 1)}${user?.lastName?.slice(
                      0,
                      1
                    )}`}
                  </AvatarFallback>
                </Avatar>
                <Link
                  className={buttonVariants({ variant: "link" })}
                  href={`/dashboard/users/${user?.id} `}
                >
                  <div>
                    <p className=" text-xs md:text-base text-nowrap text-blue-600 font-light capitalize">
                      <span>{user?.firstName} </span>
                      <span>{user?.lastName} </span>
                    </p>
                  </div>
                </Link>
              </TableCell>
              <TableCell className="text-xs md:text-base">
                {formatDate(user?.createdAt!, "YYYY-MM-DD [-] hh:mm A")}
              </TableCell>
              <TableCell className="text-xs md:text-base">
                {user?.isActive ? "Activo" : "Inactivo"}
              </TableCell>
              <TableCell className="text-xs md:text-base">
                {user?.rol as string}
              </TableCell>
              <TableCell>
                <div className="flex items-start gap-1">
                  <UpdateUserSidebar
                    handleUpdateUser={handleUpdateUser}
                    users={users}
                    selectedUser={{
                      ...user,
                      userId: user?.id,
                      currentRol: user?.rol,
                    }}
                  />{" "}
                  <UserOptiosnDropdown user={user as any} />
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default UserList;