Implementation of Downshift

import React from 'react';
import PropTypes from 'prop-types';
import Downshift from 'downshift';

import {
  InputWrapper,
  InputMainWrapper,
  ClearButtonWrapper,
} from './styles/fiddleStyles';
import CategoriesDropdown from './CategoriesDropdown';
import XIcon from './partials/XIcon';

const propTypes = {
  items: PropTypes.array,
};

const defaultProps = {
  items: [],
};

const Autocomplete = ({ items, onInputChange, input, ...rest }) => {
  const { onChange, onDragStart, onDrop, onFocus } = input;

  return (
    <Downshift onChange={onInputChange} {...rest}>
      {({
        getInputProps,
        getItemProps,
        getRootProps,
        inputValue,
        selectedItem,
        highlightedIndex,
        isOpen,
        clearSelection,
      }) => {
        return (
          <div className="input-wrapper">
            <InputMainWrapper
              {...getInputProps({
                placeholder: 'What are you looking for?',
                type: 'search',
                required: true,
                id: 'downshift-input',
                onChange,
                onDragStart,
                onDrop,
                onFocus,
              })}
            />
            {isOpen ? (
              <CategoriesDropdown
                {...{
                  items,
                  inputValue,
                  selectedItem,
                  highlightedIndex,
                  getItemProps,
                }}
              />
            ) : null}
            {selectedItem && (
              <ClearButtonWrapper onClick={() => clearSelection()}>
                <label>
                  <div>
                    <XIcon />
                  </div>
                </label>
              </ClearButtonWrapper>
            )}
          </div>
        );
      }}
    </Downshift>
  );
};

Autocomplete.propTypes = propTypes;
Autocomplete.defaultProps = defaultProps;

export default Autocomplete;