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 [
22        selectedDataLimitTab,
23        setSelectedDataLimitTab
24    ] = useState<'limited' | 'unlimited' | string>('limited');
25    useEffect(() => {
26        if (selectedDataLimitTab === 'limited') {
27            form.setValue("data_limit", 1)
28            form.setValue("data_limit_reset_strategy", "no_reset");
29        } else {
30            form.setValue("data_limit", 0)
31            form.setValue("data_limit_reset_strategy", "no_reset");
32        }
33        // eslint-disable-next-line
34    }, [selectedDataLimitTab]);
35
36    return (
37        <>
38
39            <FormLabel>
40                {t('page.users.data_limit_method')}
41            </FormLabel>
42            <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
43                <Tabs defaultValue="limited" onValueChange={setSelectedDataLimitTab} className="mt-2 w-full">
44                    <TabsList className="flex flex-row items-center p-1 w-full rounded-md bg-accent">
45                        <TabsTrigger
46                            className="w-full"
47                            value="limited">
48                            {t('page.users.limited')}
49                        </TabsTrigger>
50                        <TabsTrigger
51                            className="w-full"
52                            value="unlimited">
53                            {t('page.users.unlimited')}
54                        </TabsTrigger>
55                    </TabsList>
56                    <TabsContent value="limited">
57                        <DataLimitField />
58                        {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
59                    </TabsContent>
60                </Tabs>
61            </div>
62        </>
63    )
64}