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