1import { type FC, useMemo } from "react";
 2import {
 3    Separator,
 4    DialogTitle,
 5    DialogContent,
 6    Dialog,
 7    DialogHeader,
 8    Form,
 9    Button,
10    ScrollArea,
11    VStack,
12} from "@marzneshin/components";
13import { useTranslation } from "react-i18next";
14import {
15    DATA_LIMIT_METRIC,
16    useUsersCreationMutation,
17    useUsersUpdateMutation,
18    UserSchema,
19    UsernameField, type UserMutationType
20} from "@marzneshin/features/users";
21import { ServicesField } from "@marzneshin/features/services";
22import { NoteField } from "./fields";
23import { MutationDialogProps, useMutationDialog } from "@marzneshin/hooks";
24import { DataLimitFields, ExpirationMethodFields } from "./sections";
25
26export const UsersMutationDialog: FC<MutationDialogProps<UserMutationType>> = ({
27    entity,
28    onClose,
29}) => {
30    const { t } = useTranslation();
31    const defaultValue = useMemo(() => ({
32        service_ids: [],
33        username: "",
34        data_limit_reset_strategy: "no_reset",
35        note: "",
36    }), [])
37
38    const { open, onOpenChange, form, handleSubmit } = useMutationDialog({
39        entity,
40        onClose,
41        createMutation: useUsersCreationMutation(),
42        updateMutation: useUsersUpdateMutation(),
43        schema: UserSchema,
44        defaultValue,
45        loadFormtter: (d) => ({
46            ...d,
47            data_limit: (d.data_limit ? d.data_limit : 0) / DATA_LIMIT_METRIC,
48        }),
49    });
50
51    return (
52        <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
53            <DialogContent className="min-w-full h-full md:h-auto md:min-w-[42rem]">
54                <ScrollArea className="flex flex-col justify-between h-full ">
55                    <DialogHeader className="mb-3">
56                        <DialogTitle className="text-primary">
57                            {entity
58                                ? t("page.users.dialogs.edition.title")
59                                : t("page.users.dialogs.creation.title")}
60                        </DialogTitle>
61                    </DialogHeader>
62                    <Form {...form}>
63                        <form onSubmit={handleSubmit} >
64                            <div className="flex-col grid-cols-2 gap-2 sm:flex md:grid h-full">
65                                <div className="space-y-3">
66                                    <UsernameField disabled={!!entity?.username} />
67                                    <Separator />
68                                    <DataLimitFields />
69                                    <Separator />
70                                    <ExpirationMethodFields entity={entity} />
71                                    <Separator />
72                                    <NoteField />
73                                </div>
74                                <VStack>
75                                    <ServicesField />
76                                </VStack>
77                            </div>
78                            <Button
79                                className="mt-3 w-full font-semibold"
80                                type="submit"
81                                disabled={form.formState.isSubmitting}
82                            >
83                                {t("submit")}
84                            </Button>
85                        </form>
86                    </Form>
87                </ScrollArea>
88            </DialogContent>
89        </Dialog>
90    );
91};