1import { FormControl, FormLabel, FormErrorMessage, Center, Spinner } from '@chakra-ui/react';
 2import { Inbounds, InboundType } from 'types';
 3import { TFunction } from 'i18next';
 4import { Controller } from 'react-hook-form';
 5import { InboundsSelectList } from './inbounds-select-list';
 6import { InboundCard } from 'components/inbounds-card';
 7
 8
 9interface InboundsFieldProps {
10  form: any;
11  inbounds: Inbounds;
12  t: TFunction<'translation', undefined, 'translation'>;
13}
14
15export const InboundsField = ({ form, t, inbounds }: InboundsFieldProps) => {
16  return inbounds.length === 0 ? (
17    <Center><Spinner /></Center>
18  ) : (
19    <FormControl
20      isInvalid={
21        !!form.formState.errors.services?.message
22      }
23    >
24      <FormLabel>{t('inbounds')}</FormLabel>
25      <Controller
26        control={form.control}
27        name="inbounds"
28        render={() => {
29          return (
30            <InboundsSelectList
31              list={inbounds}
32              renderCheckboxContent={(inbound: InboundType) => (
33                <InboundCard tag={inbound.tag} protocol={inbound.protocol} nodeName={inbound.node.name} />
34              )}
35            />
36          );
37        }}
38      />
39      <FormErrorMessage>
40        {t(form.formState.errors.services?.message as string)}
41      </FormErrorMessage>
42    </FormControl>
43  );
44}