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    console.log(form.getValues().services)
25    return (
26        <FormField
27            control={form.control}
28            name="services"
29            render={() => (
30                <FormItem>
31                    <FormLabel>{t('services')}</FormLabel>
32                    <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
33                        {data.entity.map(service => (
34                                <FormField
35                                    control={form.control}
36                                    name='services'
37                                    render={({ field }) => (
38                                        <FormItem key={service.id}>
39                                            <FormControl>
40                                                <div
41                                                    className={cn("flex mb-2 flex-row gap-2 items-center p-3 rounded-md border", { "bg-secondary": field.value?.includes(service.id) })}>
42                                                    <Checkbox
43                                                        checked={field.value?.includes(service.id)}
44                                                        onCheckedChange={(checked) => {
45                                                            return checked
46                                                                ? field.onChange([...field.value, service.id])
47                                                                : field.onChange(
48                                                                    field.value?.filter(
49                                                                        (value: number) => value !== service.id
50                                                                    )
51                                                                )
52                                                        }}
53                                                    />
54                                                    <FormLabel className="flex flex-row justify-between items-center w-full">
55                                                        <ServiceCard service={service} />
56                                                    </FormLabel>
57                                                </div>
58                                            </FormControl>
59                                            <FormMessage />
60                                        </FormItem>
61                                    )}
62                                />
63                        ))}
64                    </ScrollArea>
65                </FormItem>
66            )}
67        />
68    );
69};