/**
 * @Move (SQPD)
 * Only used by the Forms module - move to Forms/
 */
import Alert from '@material-hu/mui/Alert';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useProfileFields from 'src/hooks/queryHooks/useProfileFields';
import { CustomFieldTypes } from 'src/types/instance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormSelect from 'src/components/FormInputs/FormSelect';
import { UserFields } from 'src/components/ReportFilter/constants';

function AutocompleteQuestion() {
  const { t } = useLokaliseTranslation('autocomplete_question');

  const { data: profileFields = [], isLoading: profileFieldsLoading } =
    useProfileFields({
      select: response => [
        ...Object.values(UserFields)
          .filter(id => id !== UserFields.POSITION) // Not supported by backend yet
          .map(id => ({
            value: id,
            label: t('USER_FIELDS', { context: id }),
          })),
        ...response.data
          .filter(
            field =>
              ![CustomFieldTypes.USER, CustomFieldTypes.USER_LIST].includes(
                field.type,
              ),
          )
          .map(field => ({ value: field.id, label: field.name })), // filter: patch temporal para web y mobile
      ],
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    });

  if (profileFieldsLoading) return <CircularProgress />;

  return (
    <Stack
      ml={5}
      mt={2}
    >
      <Typography
        variant="body2"
        fontSize="16px"
        sx={{ fontWeight: 'bold' }}
      >
        {t('AUTOCOMPLETE_FIELD')}
      </Typography>
      <Alert
        severity="info"
        variant="outlined"
        sx={{ p: 0, pl: 1, mb: 3, mt: 1, fontSize: '14px' }}
      >
        {t('AUTOCOMPLETE_FIELD_SUB')}
      </Alert>
      <FormSelect
        name="userField"
        label={t('PROFILE_FIELD')}
        options={profileFields}
        formControlProps={{
          size: 'small',
          sx: { width: '200px' },
        }}
      />
    </Stack>
  );
}

export default AutocompleteQuestion;