1import {
 2    Checkbox,
 3    FormControl,
 4    FormField,
 5    FormItem,
 6    FormLabel,
 7    FormMessage,
 8    ScrollArea,
 9} from '@marzneshin/components';
10import { useServicesQuery } from '@marzneshin/features/services';
11import { ServiceCard } from '@marzneshin/features/users';
12import { cn } from '@marzneshin/utils';
13import { FC } from 'react'
14import { useFormContext } from 'react-hook-form';
15import { useTranslation } from 'react-i18next';
16
17interface ServicesFieldProps { }
18
19export const ServicesField: FC<ServicesFieldProps> = () => {
20    const form = useFormContext();
21    const { data } = useServicesQuery({ page: 1, size: 100 });
22    const { t } = useTranslation();
23
24    return (
25        <FormField
26            control={form.control}
27            name="services"
28            render={() => (
29                <FormItem>
30                    <FormLabel>{t('services')}</FormLabel>
31                    <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
32                        {data.entity.map(service => (
33                            <FormField
34                                control={form.control}
35                                name='services'
36                                render={({ field }) => (
37                                    <FormItem key={service.id}>
38                                        <FormControl>
39                                            <div
40                                                className={cn("flex mb-2 flex-row gap-2 items-center p-3 rounded-md border", { "bg-secondary": field.value?.includes(service.id) })}>
41                                                <Checkbox
42                                                    checked={field.value?.includes(service.id)}
43                                                    onCheckedChange={(checked) => {
44                                                        return checked
45                                                            ? field.onChange([...field.value, service.id])
46                                                            : field.onChange(
47                                                                field.value?.filter(
48                                                                    (value: number) => value !== service.id
49                                                                )
50                                                            )
51                                                    }}
52                                                />
53                                                <FormLabel className="flex flex-row justify-between items-center w-full">
54                                                    <ServiceCard service={service} />
55                                                </FormLabel>
56                                            </div>
57                                        </FormControl>
58                                        <FormMessage />
59                                    </FormItem>
60                                )}
61                            />
62                        ))}
63                    </ScrollArea>
64                </FormItem>
65            )}
66        />
67    );
68};