1import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
 2import { TFunction } from 'i18next';
 3import { Controller } from 'react-hook-form';
 4
 5interface UsernameFieldProps {
 6    form: any;
 7    isEditing: boolean;
 8    t: TFunction<'translation', undefined, 'translation'>;
 9    disabled: boolean;
10}
11
12export const UsernameField = ({ form, isEditing, t, disabled }: UsernameFieldProps) => {
13  return (
14    <FormControl mb={'10px'}>
15      <FormLabel>{t('username')}</FormLabel>
16      <HStack>
17        <Input
18          size="sm"
19          type="text"
20          borderRadius="6px"
21          error={form.formState.errors.username?.message}
22          disabled={disabled || isEditing}
23          {...form.register('username')}
24        />
25        {isEditing && (
26          <HStack px={1}>
27            <Controller
28              name="status"
29              control={form.control}
30              render={({ field }) => {
31                return (
32                  <Tooltip
33                    placement="top"
34                    label={'status: ' + field.value}
35                    textTransform="capitalize"
36                  >
37                    <Box>
38                      <Switch
39                        colorScheme="primary"
40                        disabled={
41                          field.value !== 'active' &&
42                                                    field.value !== 'disabled'
43                        }
44                        isChecked={field.value === 'active'}
45                        onChange={(e) => {
46                          if (e.target.checked) {
47                            field.onChange('active');
48                          } else {
49                            field.onChange('disabled');
50                          }
51                        }}
52                      />
53                    </Box>
54                  </Tooltip>
55                );
56              }}
57            />
58          </HStack>
59        )}
60      </HStack>
61    </FormControl>
62  )
63}