import React, { useState, useEffect } from 'react';
import { Field } from 'react-final-form';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import ProjectInput from 'components/formItems/ProjectInput';
import { required, email, composeValidators } from 'store/utils/validation';
import { getDefaultSettings } from 'http2';
import styleIdentifiers from './searchForm.scss';

// assets
import searchIcon from './assets/search.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type SearchFormProps = StateProps & DispatchProps & OwnProps;

const SearchForm = (props: SearchFormProps) => {
  const { handleSubmit, submitting, valid, form } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);

  return (
    <form className={styles('SearchForm')} onSubmit={handleSubmit}>
      <div className={styles('form-wrapper')}>
        <Field
          className={styles('search-input')}
          fieldWrapperClassName={styles('field-wrapper')}
          component={ProjectInput}
          name="field"
          placeholder="general.header.search"
        />
        {/* <Button disabled={submitting || !valid} type="submit" /> */}
        <div className={styles('button')} disabled={submitting || !valid} type="submit">
          <img src={searchIcon} alt="search-icon" />
        </div>
      </div>
    </form>
  );
};

export default SearchForm;
