1
 2import { FC, useEffect, useState } from "react";
 3import {
 4    Tabs,
 5    TabsTrigger,
 6    TabsContent,
 7    FormLabel
 8} from '@marzneshin/components';
 9import { useTranslation } from 'react-i18next';
10import {
11    DataLimitField,
12    DataLimitResetStrategyField,
13} from "../fields";
14import { TabsList } from "@radix-ui/react-tabs";
15import { useFormContext } from 'react-hook-form';
16
17export const DataLimitFields: FC = () => {
18    const form = useFormContext()
19
20    const { t } = useTranslation()
21    const data_limit = form.watch().data_limit;
22
23    const [
24        selectedDataLimitTab,
25        setSelectedDataLimitTab
26    ] = useState((data_limit === 0) ? "unlimited" : "limited");
27
28    useEffect(() => {
29        setSelectedDataLimitTab((data_limit === 0) ? "unlimited" : "limited")
30    }, [data_limit])
31
32    useEffect(() => {
33        if (selectedDataLimitTab !== 'limited') {
34            form.setValue("data_limit", undefined)
35            form.setValue("data_limit_reset_strategy", "no_reset");
36        } 
37        // eslint-disable-next-line
38    }, [selectedDataLimitTab]);
39
40    return (
41        <>
42            <FormLabel>
43                {t('page.users.data_limit_method')}
44            </FormLabel>
45            <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
46                <Tabs defaultValue={selectedDataLimitTab} onValueChange={setSelectedDataLimitTab} className="mt-2 w-full">
47                    <TabsList className="flex flex-row items-center p-1 w-full rounded-md bg-accent">
48                        <TabsTrigger
49                            className="w-full"
50                            value="limited">
51                            {t('page.users.limited')}
52                        </TabsTrigger>
53                        <TabsTrigger
54                            className="w-full"
55                            value="unlimited">
56                            {t('page.users.unlimited')}
57                        </TabsTrigger>
58                    </TabsList>
59                    <TabsContent value="limited">
60                        <DataLimitField />
61                        {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
62                    </TabsContent>
63                </Tabs>
64            </div>
65        </>
66    )
67}