import React, { memo, useRef, useEffect } from 'react';
import { FiSearch } from 'react-icons/fi';
import SearchResult from './SearchResult';

const Search = ({ search, onSearch }) => {
  const inputEl = useRef();

  useEffect(() => {
    if (search.show) {
      inputEl.current.focus();
    }
  }, [search.show]);

  const style = {
    display: search.show ? 'block' : 'none'
  };

  let i = 0;
  const results = search.results.map(result => (
    <SearchResult key={i++} result={result} />
  ));

  return (
    <div className="search" style={style}>
      <div className="search-input-wrap">
        <FiSearch className="search-input-icon" />
        <input
          ref={inputEl}
          className="search-input"
          type="text"
          onChange={e => onSearch(e.target.value)}
        />
      </div>
      <div className="search-results">{results}</div>
    </div>
  );
};

export default memo(Search);