1import {
 2  FormControl,
 3  FormField,
 4  FormItem,
 5  FormLabel,
 6  FormMessage,
 7  ToggleGroup,
 8  ToggleGroupItem,
 9  ScrollArea
10} from '@marzneshin/components';
11import { useServicesQuery } from '@marzneshin/features/services';
12import { ServiceCard } from '@marzneshin/features/users';
13import { FC } from 'react'
14import { useFormContext } from 'react-hook-form';
15import { useTranslation } from 'react-i18next';
16
17interface ServicesFieldProps {
18  services: number[]
19  setServices: (s: number[]) => void
20}
21
22export const ServicesField: FC<ServicesFieldProps> = ({
23  services,
24  setServices
25}) => {
26  const form = useFormContext();
27  const { data } = useServicesQuery();
28  const { t } = useTranslation();
29
30  const handleToggle = (selectedServiceIds: string[]) => {
31    setServices(selectedServiceIds.map(Number));
32  };
33
34  return (
35    <FormField
36      control={form.control}
37      name="services"
38      render={() => (
39        <FormItem>
40          <FormLabel>{t('services')}</FormLabel>
41          <FormControl>
42            <ToggleGroup
43              defaultValue={services.map(String)}
44              className="h-full"
45              onValueChange={handleToggle}
46              type="multiple"
47            >
48              <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
49                {data.map(service => (
50                  <ToggleGroupItem
51                    key={service.id}
52                    value={String(service.id)}
53                    {...form.register(`services.${service.id}`)}
54                    className="px-0 mb-1 w-full"
55                  >
56                    <ServiceCard service={service} />
57                  </ToggleGroupItem>
58                ))}
59              </ScrollArea>
60            </ToggleGroup>
61          </FormControl>
62          <FormMessage />
63        </FormItem>
64      )}
65    />
66  );
67};