import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import DropdownList from 'react-widgets/DropdownList';
import 'react-widgets/styles.css';
import { SearchFieldDropdownMenuWrapper, SearchIconContainer } from './style.js';
import SearchIcon from '../../Icons/SearchIcon/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var SearchField = function SearchField(_ref) {
  var searchItems = _ref.searchItems;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchFieldDropdownMenuWrapper, {
    style: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center"
    },
    onClick: function onClick() {
      setOpen(!open);
    }
  }, /*#__PURE__*/React__default.createElement(SearchIconContainer, null, /*#__PURE__*/React__default.createElement(SearchIcon, {
    width: "14",
    height: "19"
  })), /*#__PURE__*/React__default.createElement(DropdownList, {
    open: open,
    data: searchItems,
    defaultValue: "Search",
    selectIcon: "",
    className: "dropdownList",
    containerClassName: "dropdownListContainer",
    renderValue: function renderValue(_ref2) {
      var item = _ref2.item;
      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, " " + item);
    }
  }))));
};

export { SearchField as default };
//# sourceMappingURL=index.js.map
