import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { parseAutocompleteAnswer } from 'src/pages/dashboard/serviceManagement/utils';

type Props = {
  name: string;
  answer?: any;
};

export const AutocompleteInput = ({ name, answer }: Props) => {
  const { setValue } = useFormContext();

  useEffect(() => {
    if (answer) {
      setValue(name, parseAutocompleteAnswer(answer), {
        shouldValidate: true,
      });
    }
  }, [setValue, name, answer]);

  return (
    <FormInputClassic
      name={name}
      inputProps={{
        disabled: true,
        autoComplete: 'off',
        autoCorrect: 'off',
        hasCounter: false,
      }}
    />
  );
};

export default AutocompleteInput;