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