1import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Flex, chakra } from '@chakra-ui/react';
 2import { UsersIcon, ServerStackIcon } from '@heroicons/react/24/outline';
 3import { IconBaseStyle } from 'constants/IconBaseStyle';
 4import { TFunction } from 'i18next';
 5import { Controller } from 'react-hook-form';
 6import { Service } from 'types';
 7import { SystemPropertyStatus } from 'components/system-property-status';
 8import { ServicesSelectList } from './services-select-list';
 9
10const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);
11const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);
12
13interface ServicesFieldProps {
14  form: any;
15  services: Service[];
16  t: TFunction<'translation', undefined, 'translation'>;
17}
18
19export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
20  return services.length === 0 ? (
21    <Center><Spinner /></Center>
22  ) : (
23    <FormControl
24      isInvalid={
25        !!form.formState.errors.services?.message
26      }
27    >
28      <FormLabel>{t('userDialog.services')}</FormLabel>
29      <Controller
30        control={form.control}
31        name="services"
32        render={() => {
33          return (
34            <ServicesSelectList
35              list={services}
36              renderCheckboxContent={(service) => (
37                <Flex alignItems="center" justifyContent="space-between" flexDir="row" w="full">
38                  <Text fontSize="sm" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="medium">
39                    {service.name}
40                  </Text>
41                  <Flex flexDirection="row" alignItems="center">
42                    <SystemPropertyStatus value={service.users.length} StatusIcon={UsersServiceIcon} />
43                    <Text color="primary.600" _dark={{ color: 'gray.100' }} mx="8px" fontSize="sm">/</Text>
44                    <SystemPropertyStatus value={service.inbounds.length} StatusIcon={InboundsServiceIcon} />
45                  </Flex>
46                </Flex>
47              )}
48            />
49          );
50        }}
51      />
52      <FormErrorMessage>
53        {t(
54          form.formState.errors.services
55            ?.message as string
56        )}
57      </FormErrorMessage>
58    </FormControl>
59  );
60}