import React, { useState, useEffect, useCallback, useRef } from 'react';
import BaseForm from '../../BaseForm';

const SearchBar = props => {
  const { items, buttons, onCommit, formProps } = props;
  const [form, setForm] = useState(null);
  const getForm = f => {
    console.log(f);
    setForm(f);
  };
  const handleFinish = values => {
    console.log(values, 'value');
    onCommit(values);
  };
  useEffect(() => {
    if (form) {
      console.log(form.getFieldsValue());
    }
  }, [form]);

  return (
    <BaseForm
      items={items}
      buttons={buttons}
      formProps={{ ...formProps, onFinish: handleFinish }}
      getForm={getForm}
    />
  );
};

export default SearchBar;