1
 2import {
 3  Stack,
 4} from '@chakra-ui/react';
 5import { ListCheckBox } from 'components/list-check-box';
 6import { Inbounds, InboundType } from 'types';
 7import { forwardRef, Fragment, ReactNode } from 'react';
 8import {
 9  useFormContext,
10} from 'react-hook-form';
11
12interface InboundsSelectListProps {
13  list: Inbounds;
14  renderCheckboxContent: (inbound: InboundType) => ReactNode;
15}
16
17export const InboundsSelectList = forwardRef<HTMLDivElement, InboundsSelectListProps>(
18  function({ list, renderCheckboxContent }, ref) {
19    const form = useFormContext();
20
21    const handleInboundToggle = (inboundId: number) => {
22      const currentInbounds = form.getValues('inbounds');
23      const isSelected = currentInbounds.includes(inboundId);
24
25      let updatedInbounds = currentInbounds.filter((id: number) => id !== inboundId);
26
27      if (!isSelected) {
28        updatedInbounds = [...currentInbounds, inboundId];
29      }
30
31      form.setValue('inbounds', updatedInbounds, { shouldValidate: true });
32    };
33
34    return (
35      <Stack spacing={3} ref={ref}>
36        {list.map((inbound: InboundType) => (
37          <Fragment key={inbound.id}>
38            <ListCheckBox
39              isChecked={form.getValues('inbounds').includes(inbound.id)}
40              onChange={() => handleInboundToggle(inbound.id)}
41              value={String(inbound.id)}
42              renderContent={() => renderCheckboxContent(inbound)}
43            />
44          </Fragment>
45        ))}
46      </Stack>
47    );
48  }
49);