import React, { useState } from 'react';
import PropTypes from 'prop-types';
import FormFieldSearch from '../forms/form-field-search';
import css from './search-form.css';

const SearchForm = ({ labelText, searchUrl, searchIsOpen, aiSearchCta }) => {
  const [searchValue, onChangeSearchValue] = useState('');
  function handleChangeSearchValue(e) {
    onChangeSearchValue(e.target.value);
  }
  return (
    <div className={css['ds-search-form']}>
      {/* Allows for tabbing from the search disclosure. */}
      <div id='search-form' tabIndex='-1' role='presentation' />
      <form
        action={searchUrl}
        method='get'
        className={css['ds-search-form-container']}
      >
        <FormFieldSearch
          adjacent
          value={searchValue}
          onChange={handleChangeSearchValue}
          inverse
          labelText={labelText}
          name='q'
          focusInput={searchIsOpen}
          id='masthead-search'
        />
      </form>
      {aiSearchCta && (
        <div className={css['ds-search-form__cta-container']}>
          {aiSearchCta}
        </div>
      )}
    </div>
  );
};

SearchForm.defaultProps = {
  labelText: 'Search',
  searchUrl: '',
  searchIsOpen: false,
  aiSearchCta: null,
};

SearchForm.propTypes = {
  labelText: PropTypes.string,
  searchUrl: PropTypes.string,
  searchIsOpen: PropTypes.bool,
  aiSearchCta: PropTypes.node,
};

export default SearchForm;
