1
 2import {
 3  Box,
 4  Flex,
 5  Stack,
 6} from '@chakra-ui/react';
 7import { ListCheckBox } from 'components/list-check-box';
 8import { forwardRef, ReactNode } from 'react';
 9import {
10  useFormContext,
11} from 'react-hook-form';
12import { Service } from 'types';
13
14interface ServicesSelectListProps {
15  list: Service[];
16  renderCheckboxContent: (service: Service) => ReactNode;
17}
18
19export const ServicesSelectList = forwardRef<HTMLDivElement, ServicesSelectListProps>(
20  function({ list, renderCheckboxContent }, ref) {
21    const form = useFormContext();
22
23    const handleServiceToggle = (serviceId: number) => {
24      const currentServices = form.getValues('services');
25      const isSelected = currentServices.includes(serviceId);
26
27      let updatedServices;
28
29      if (isSelected) {
30        updatedServices = currentServices.filter((id: number) => id !== serviceId);
31      } else {
32        updatedServices = [...currentServices, serviceId];
33      }
34
35      form.setValue('services', updatedServices, { shouldValidate: true });
36    };
37
38    return (
39      <Stack spacing={3} ref={ref}>
40        {list.map((service: Service) => (
41          <Box key={service.id}>
42            <Flex align="center">
43              <ListCheckBox
44                isChecked={form.getValues('services').includes(service.id)}
45                onChange={() => handleServiceToggle(service.id)}
46                value={String(service.id)}
47                renderContent={() => renderCheckboxContent(service)}
48              />
49            </Flex>
50          </Box>
51        ))}
52      </Stack>
53    );
54  }
55);