1import {
 2    Button,
 3    ScrollArea,
 4    Tabs,
 5    TabsContent,
 6    TabsList,
 7    TabsTrigger,
 8    Awaiting,
 9    SettingsInfoSkeleton,
10    SettingsDialogProps,
11    SettingsDialog,
12} from "@marzneshin/components";
13import {
14    UserServicesTable,
15    useUserUsageResetCmd,
16    type UserType
17} from "@marzneshin/features/users";
18import { type FC, useEffect } from "react";
19import { useTranslation } from "react-i18next";
20import {
21    UserStatusEnableButton,
22    SubscriptionActions,
23    QRCodeSection,
24    UserInfoTable
25} from "./user-info";
26
27interface UsersSettingsDialogProps extends SettingsDialogProps {
28    entity: UserType | null;
29    onClose: () => void;
30    isPending: boolean;
31}
32
33export const UsersSettingsDialog: FC<UsersSettingsDialogProps> = ({
34    onOpenChange,
35    open,
36    entity,
37    onClose,
38    isPending,
39}) => {
40    const { t } = useTranslation();
41    const { mutate: resetUsage } = useUserUsageResetCmd();
42
43    useEffect(() => {
44        if (!open) onClose();
45    }, [open, onClose]);
46
47    return (
48        <SettingsDialog open={open} onOpenChange={onOpenChange}>
49            <Awaiting
50                Component={entity ? (
51                    <ScrollArea className="flex flex-col gap-4 h-full">
52                        <Tabs defaultValue="info" className="w-full h-full">
53                            <TabsList className="w-full bg-accent">
54                                <TabsTrigger className="w-full" value="info">
55                                    {t("user_info")}
56                                </TabsTrigger>
57                                <TabsTrigger className="w-full" value="services">
58                                    {t("services")}
59                                </TabsTrigger>
60                                <TabsTrigger className="w-full" value="subscription">
61                                    {t("subscription")}
62                                </TabsTrigger>
63                            </TabsList>
64                            <TabsContent
65                                value="info"
66                                className="flex flex-col gap-2 w-full h-full"
67                            >
68                                <UserInfoTable user={entity} />
69                                <div className="hstack justify-center items-center gap-2">
70                                    <Button className="w-1/2" onClick={() => resetUsage(entity)}>
71                                        {t("page.users.reset_usage")}
72                                    </Button>
73                                    <UserStatusEnableButton user={entity} />
74                                </div>
75                            </TabsContent>
76                            <TabsContent value="services">
77                                <UserServicesTable user={entity} />
78                            </TabsContent>
79                            <TabsContent value="subscription">
80                                <QRCodeSection entity={entity} />
81                                <SubscriptionActions entity={entity} />
82                            </TabsContent>
83                        </Tabs>
84                    </ScrollArea>
85                ) : (<div>Not Found</div>)}
86                Skeleton={<SettingsInfoSkeleton />}
87                isFetching={isPending}
88            />
89        </SettingsDialog>
90    );
91};