"use client";
import { usePermission } from "@/utils/auth/permission";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Spinner } from "flowbite-react";
import { FC } from "react";
import { HiInformationCircle } from "react-icons/hi";
import DeleteItem from "../common/delete-item";
import DataTable from "../dataTable/data-table-fb";
import RoleForm from "./role-form";

type props = {
  setRoleIds: Function;
  roleIds: string[];
};

const RoleList: FC<props> = ({ setRoleIds, roleIds }) => {
  const getRoles = async () => {
    const { data } = await axios.get(`/api/roles`);
    return data?.data as Role[];
  };
  const {
    data: roles,
    isLoading,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["roles"],
    placeholderData: keepPreviousData,
    queryFn: () => getRoles(),
    retry: 0,
  });

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => <div className="font-bold">{row.index + 1}</div>,
    },
    {
      header: "Role name",
      accessorKey: "name",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const role = row.original;
        const role_id: string = String(role.id);
        return (
          <>
            <div className="flex">
              <div className="mr-2">
                {usePermission("roles.edit") && (
                  <RoleForm role={role} mode="edit" />
                )}
              </div>
              {usePermission("roles.delete") && (
                // <DeleteRole roleIds={[role_id]} />
                <DeleteItem
                  name="Role"
                  keys="roles"
                  url={`/api/v1/roles/${role_id}`}
                />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {isError && (
        <Alert color="failure" icon={HiInformationCircle}>
          <span className="font-medium">Info alert!</span>{" "}
          {error?.response?.data?.error?.message}{" "}
        </Alert>
      )}
      {isLoading && (
        <div className="text-center">
          <Spinner
            aria-label="Center-aligned spinner example"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {roles !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={roles} columns={columns} />
          </div>
        </div>
      )}
    </>
  );
};
export default RoleList;