1import {
 2    FormControl,
 3    FormField,
 4    FormItem,
 5    Input,
 6    FormLabel,
 7    FormMessage
 8} from '@marzneshin/components';
 9import { type FC, useEffect, useState } from 'react'
10import { useFormContext } from 'react-hook-form';
11import { useTranslation } from 'react-i18next';
12
13export const UsageDurationField: FC = () => {
14    const form = useFormContext();
15    const { t } = useTranslation();
16
17    const defaultDuration = (form.getValues('usage_duration') ?? 0) / 86400;
18    const [duration, setDuration] = useState<number>(defaultDuration);
19
20    useEffect(() => {
21        form.setValue('usage_duration', duration * 86400);
22    }, [form, duration]);
23
24    return (
25        <FormField
26            control={form.control}
27            name="usage_duration"
28            render={({ field }) => (
29                <FormItem>
30                    <FormLabel>{t('page.users.usage_duration')} ({t('days')})</FormLabel>
31                    <FormControl>
32                        <Input
33                            {...field}
34                            type="number"
35                            value={duration}
36                            onChange={(e) => {
37                                setDuration(Number(e.target.value));
38                                field.onChange(e.target.value);
39                            }}
40                        />
41                    </FormControl>
42                    <FormMessage />
43                </FormItem>
44            )}
45        />
46    );
47}