1import {
 2    Button,
 3    Card,
 4    CardContent,
 5    CardHeader,
 6    CardTitle,
 7    Table,
 8    TableBody,
 9    TableRowWithCell,
10} from "@marzneshin/common/components";
11import { FC, useCallback } from "react";
12import {
13    type AdminProp,
14    AdminEnabledPill,
15    AdminPermissionPill,
16    useAdminUsersStatusDisable,
17    useAdminUsersStatusEnable
18} from "@marzneshin/modules/admins";
19import { useTranslation } from "react-i18next";
20import { LoaderIcon, UserCheck, UserX } from "lucide-react";
21import { format } from '@chbphone55/pretty-bytes';
22
23export const AdminInfoTable: FC<AdminProp> = ({ admin: entity }) => {
24    const { t } = useTranslation();
25    const usersDataUsage = format(entity.users_data_usage);
26    const { mutate: adminStatusEnable, isPending: enablePending } = useAdminUsersStatusEnable()
27    const { mutate: adminStatusDisable, isPending: disablePending } = useAdminUsersStatusDisable()
28
29    const handleAdmingStatusEnable = useCallback(() => {
30        adminStatusEnable({ admin: entity })
31    }, [entity, adminStatusEnable]);
32
33    const handleAdmingStatusDisable = useCallback(() => {
34        adminStatusDisable({ admin: entity })
35    }, [entity, adminStatusDisable]);
36
37    return (
38        <Card>
39            <CardHeader className="flex flex-row justify-between items-center w-full">
40                <CardTitle>{t("admin_info")}</CardTitle>
41                <div className="hstack justify-center items-center gap-2">
42                    <Button
43                        className={"bg-destructive rounded-2xl"}
44                        onClick={handleAdmingStatusDisable}
45                    >
46                        {disablePending ? <LoaderIcon className="animate-spin" /> : (<><UserX className="mr-2" /> {t('page.admins.disable_users')} </>)}
47                    </Button>
48                    <Button
49                        className="bg-success rounded-2xl"
50                        onClick={handleAdmingStatusEnable}
51                    >
52                        {enablePending ? <LoaderIcon className="animate-spin" /> : (<><UserCheck className="mr-2" /> {t('page.admins.enable_users')} </>)}
53                    </Button>
54                </div>
55            </CardHeader>
56            <CardContent>
57                <Table>
58                    <TableBody>
59                        <TableRowWithCell label={t("username")} value={entity.username} />
60                        <TableRowWithCell
61                            label={t("enabled")}
62                            value={<AdminEnabledPill admin={entity} />}
63                        />
64                        <TableRowWithCell
65                            label={t("page.admins.permission")}
66                            value={<AdminPermissionPill admin={entity} />}
67                        />
68                        <TableRowWithCell
69                            label={t("page.admins.users-data-usage")}
70                            value={`${usersDataUsage[0]} ${usersDataUsage[1]}`}
71                        />
72
73                    </TableBody>
74                </Table>
75            </CardContent>
76        </Card>
77    );
78};