/**
 * @Move (SQPD)
 * Only used by the Forms module - move to Forms/
 */
import { useFormContext, Controller } from 'react-hook-form';

import { MuiTelInput } from 'mui-tel-input';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

function PhoneCountryQuestion() {
  const { control, setValue, watch } = useFormContext();
  const { t } = useLokaliseTranslation('backoffice_only');

  return (
    <Stack
      ml={5}
      mt={2}
    >
      <Typography
        sx={{ pb: 1, pl: 1 }}
        variant="subtitle2"
      >
        {t('backoffice_only:phone_country_question.default')}
      </Typography>
      <Controller
        render={({ field, fieldState: { error } }) => (
          <MuiTelInput
            defaultCountry={watch('properties[defaultCountryCode]')}
            preferredCountries={['AR', 'MX', 'PE']}
            {...field}
            // @ts-ignore
            onChange={(value: string, values: any) => {
              field.onChange(value);
              setValue('properties[defaultCountryCode]', values.countryCode);
            }}
            error={!!error}
            helperText={error?.message}
            variant="outlined"
            sx={{ width: '120px' }}
          />
        )}
        name="properties.defaultCountryCode"
        control={control}
      />
    </Stack>
  );
}

export default PhoneCountryQuestion;