import * as React from 'react';
import { useEffect } from 'react';
import { FastAutoComplete } from 'components/ui';
import useOptions from '../hooks/useOptions';
import { FormTypes } from '../../types';

function AutoComplete(props: FormTypes.FormItem.FormAtomicSelectProps) {
  const {
    config, values, validateTrigger,
  } = props;
  const {
    key,
    placeholder,
    notModify,
    data = [],
  } = config;

  // states
  const {
    ajaxOptions,
    setOptions,
  } = useOptions(props);

  // handlers

  // effects
  useEffect(setOptions, [setOptions]);

  return notModify ? <span>{values[key]}</span> : (
    <FastAutoComplete
      defaultValue={values[key] || ''}
      options={[...data, ...ajaxOptions]}
      disabled={notModify}
      placeholder={placeholder}
      // eslint-disable-next-line react/destructuring-assignment
      onChange={props[validateTrigger]}
    />
  );
}

export default AutoComplete;