"use client";
// import TableCheckbox from "@/components/dataTable/table-check-box";
import { User } from "@/interfaces/User";
import { usePermission } from "@/utils/auth/permission";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Spinner } from "flowbite-react";
import Link from "next/link";
import { FC, useEffect, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import { MdLock } from "react-icons/md";
import DeleteItem from "../common/delete-item";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import UserEdit from "./user-edit";
import UserStatus from "./user-status";

type props = {
  filterValue?: string;
};

const UsersList: FC<props> = ({ filterValue }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>({});

  const onPageChange = (page: number) => setCurrentPage(page);

  let base_url = `/api/users?page=${currentPage}`;
  let url = filterValue ? `${base_url}&${filterValue}` : base_url;
  const getUsers = async () => {
    const {
      data: { data },
      data: {
        data: { pagination },
      },
    } = await axios.get(url);
    setPagination(pagination);
    return data?.data as User[];
  };
  const {
    data: users,
    isLoading,
    isError,
    isFetching,
    error,
    refetch,
  } = useQuery({
    queryKey: ["users", { currentPage }],
    placeholderData: keepPreviousData,
    refetchOnWindowFocus: false,
    queryFn: () => getUsers(),
    retry: 0,
  });

  useEffect(() => {
    if (!filterValue?.includes("#")) {
      setCurrentPage(1);
      refetch();
    }
  }, [filterValue]);

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "company",
      accessorKey: "company",
      cell: ({ row }: any) => {
        const users = row.original;
        return <>{users?.company?.name}</>;
      },
    },
    {
      header: "domain",
      accessorKey: "domain",
      cell: ({ row }: any) => {
        const users = row.original;
        return <>{users?.company?.domain}</>;
      },
    },
    {
      header: "Reseller",
      accessorKey: "reseller",
      cell: ({ row }: any) => {
        const users = row.original;
        return <>{users?.reseller?.name}</>;
      },
    },
    {
      header: "Name",
      accessorKey: "name",
    },
    {
      header: "Email",
      accessorKey: "email",
    },
    {
      header: "Roles",
      accessorKey: "roles",
      cell: ({ row }: any) => {
        const users = row.original;
        return <>{users?.roles?.map((role: any) => `${role?.name} `)}</>;
      },
    },
    {
      header: "Status",
      accessorKey: "status",
      cell: (row: any) => <UserStatus {...row} />,
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const user = row.original;
        return (
          <>
            <div className="flex">
              <div className="mr-2">
                {usePermission("users.edit") && <UserEdit user={user} />}
              </div>
              {usePermission("users.delete") && (
                <DeleteItem
                  name="user"
                  keys="users"
                  url={`/api/v1/users/${user.id}`}
                />
              )}
              {usePermission("users.edit") && (
                <>
                  <Link href={`/permissions/${user?.id}?type=user`}>
                    <div className="flex w-full px-4 py-3 cursor-pointer">
                      <MdLock className="mr-2 text-lg" />
                    </div>
                  </Link>
                </>
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {isError && (
        <Alert color="failure" icon={HiInformationCircle}>
          <span className="font-medium">Info alert!</span>
          {error?.response?.data?.error?.message}
        </Alert>
      )}
      {users !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={users} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys="users"
          />
        </div>
      )}
    </>
  );
};
export default UsersList;