1import {
 2  FormControl,
 3  FormHelperText,
 4  FormLabel,
 5} from '@chakra-ui/react';
 6import dayjs from 'dayjs';
 7import { i18n, TFunction } from 'i18next';
 8import ReactDatePicker from 'react-datepicker';
 9import { Controller } from 'react-hook-form';
10import { relativeExpiryDate } from 'utils/dateFormatter';
11import { Input } from 'components/input';
12
13interface ExpireDateFieldProps {
14  form: any;
15  disabled: boolean;
16  t: TFunction<'translation', undefined, 'translation'>;
17  i18n: i18n;
18}
19
20export const ExpireDateField = ({ form, t, i18n, disabled }: ExpireDateFieldProps) => {
21  return (
22    <FormControl mb={'10px'}>
23      <FormLabel>{t('userDialog.expiryDate')}</FormLabel>
24      <Controller
25        name="expire"
26        control={form.control}
27        render={({ field }) => {
28          function createDateAsUTC(num: number) {
29            return dayjs(
30              dayjs(num * 1000).utc()
31              // .format("MMMM D, YYYY") // exception with: dayjs.locale(lng);
32            ).toDate();
33          }
34          const { status, time } = relativeExpiryDate(
35            field.value
36          );
37          return (
38            <>
39              <ReactDatePicker
40                locale={i18n.language.toLocaleLowerCase()}
41                dateFormat={t('dateFormat')}
42                minDate={new Date()}
43                selected={
44                  field.value
45                    ? createDateAsUTC(field.value)
46                    : undefined
47                }
48                onChange={(date: Date) => {
49                  field.onChange({
50                    target: {
51                      value: date
52                        ? dayjs(
53                          dayjs(date)
54                            .set('hour', 23)
55                            .set('minute', 59)
56                            .set('second', 59)
57                        )
58                          .utc()
59                          .valueOf() / 1000
60                        : 0,
61                      name: 'expire',
62                    },
63                  });
64                }}
65                customInput={
66                  <Input
67                    size="sm"
68                    type="text"
69                    borderRadius="6px"
70                    clearable
71                    disabled={disabled}
72                    error={
73                      form.formState.errors.expire?.message
74                    }
75                  />
76                }
77              />
78              {field.value ? (
79                <FormHelperText>
80                  {t(status, { time: time })}
81                </FormHelperText>
82              ) : (
83                ''
84              )}
85            </>
86          );
87        }}
88      />
89    </FormControl>
90  )
91}