import { Controller, type UseControllerProps } from 'react-hook-form';

import TextField, { type TextFieldProps } from '@material-hu/mui/TextField';

import { useAuth } from 'src/contexts/JWTContext';
import { getAnswerAutocompleteField } from 'src/utils/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type FormTextFieldProps = TextFieldProps &
  UseControllerProps & {
    answer?: string;
    userField?: string;
    autoCompleteBoss?: string;
  };

/**
 * @deprecated Use `@material-hu/components/design-system/Inputs/Autocomplete/form` instead
 */
export const FormAutocompleteField = ({
  name,
  fullWidth = true,
  userField,
  autoCompleteBoss,
  answer,
  label,
}: FormTextFieldProps) => {
  const { t } = useLokaliseTranslation('forms');
  const { user } = useAuth();

  const isCompleted = location.pathname.includes('completed') || !!answer;

  const showAnswer = isCompleted
    ? answer
    : getAnswerAutocompleteField(userField, autoCompleteBoss, user, t);

  return (
    <Controller
      render={() => (
        <TextField
          disabled
          label={label}
          fullWidth={fullWidth}
          InputProps={{
            sx: {
              background: theme => theme.palette.new.background.elements.grey,
            },
          }}
          value={showAnswer}
        />
      )}
      name={name}
      defaultValue={showAnswer}
    />
  );
};

export default FormAutocompleteField;