import React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './pageFilterForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type PageFilterFormProps = StateProps & DispatchProps & OwnProps;

const PageFilterForm = (props: PageFilterFormProps) => {
  const { handleSubmit, dark, placeholder } = props;
  return (
    <form className={styles('PageFilterForm')} onSubmit={handleSubmit}>
      <Field
        component={Input}
        small
        withBorder
        clear
        fieldWrapperClassName={styles('input-wrapper', dark && 'dark')}
        noMargin
        placeholder={placeholder || 'Global search'}
        name="filter"
        onChange={handleSubmit}
      />
    </form>
  );
};

export default PageFilterForm;
