text: /*
   * Backpack - Skyscanner's Design System
   *
   * Copyright 2016-2021 Skyscanner Ltd
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *   http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  import React, { useState } from 'react';
  
  import customPropTypes from './propTypes';
  import IconSearchForm from './IconSearchForm';
  import IconSearchResults from './IconSearchResults';
  
  const IconSearchApp = props => {
    const [filterValue, setFilterValue] = useState('');
  
    const onFilterChange = newValue => {
      setFilterValue(newValue);
    };
  
    const getFilteredIcons = () => {
      const { icons } = props;
  
      return icons.filter(
        icon => icon.name.indexOf(filterValue.toLowerCase()) !== -1,
      );
    };
  
    const filteredIcons = getFilteredIcons();
  
    return (
      <div>
        <IconSearchForm
          filterValue={filterValue}
          onFilterChange={onFilterChange}
        />
        <IconSearchResults searchQuery={filterValue} icons={filteredIcons} />
      </div>
    );
  };
  
  IconSearchApp.propTypes = {
    icons: customPropTypes.icons.isRequired,
  };
  
  export default IconSearchApp;
  