import React from 'react';
import cx from 'classnames';
import uiUtilities from '@teamleader/ui-utilities';
import theme from './theme.css';
import Box from '../box';
import { Heading4 } from '../typography';
import EmailSuggestion from './EmailSuggestion';

var Autocomplete = function Autocomplete(_ref) {
  var suggestions = _ref.suggestions,
      highlightedSuggestion = _ref.highlightedSuggestion,
      onClick = _ref.onClick,
      onHover = _ref.onHover,
      _ref$renderSuggestion = _ref.renderSuggestion,
      renderSuggestion = _ref$renderSuggestion === void 0 ? EmailSuggestion : _ref$renderSuggestion,
      menuWidth = _ref.menuWidth;
  var Component = renderSuggestion;
  return /*#__PURE__*/React.createElement(Box, {
    className: cx(uiUtilities['box-shadow-200'], theme['autocomplete']),
    style: {
      width: menuWidth
    }
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "neutral",
    backgroundTint: "lightest",
    borderWidth: 1,
    borderRadius: "rounded",
    overflow: "hidden"
  }, Array.isArray(suggestions) ? suggestions.map(function (suggestion) {
    return /*#__PURE__*/React.createElement(Component, {
      key: suggestion.id || suggestion.email,
      suggestion: suggestion,
      selected: suggestion === highlightedSuggestion,
      onClick: onClick === null || onClick === void 0 ? void 0 : onClick.bind(null, suggestion),
      onMouseOver: onHover === null || onHover === void 0 ? void 0 : onHover.bind(null, suggestion)
    });
  }) : Object.keys(suggestions).map(function (key, i) {
    return /*#__PURE__*/React.createElement(Box, {
      key: key,
      borderTopWidth: i > 0 ? 1 : 0
    }, /*#__PURE__*/React.createElement(Heading4, {
      padding: 3,
      paddingTop: 4
    }, key), suggestions[key].map(function (suggestion) {
      return /*#__PURE__*/React.createElement(Component, {
        key: suggestion.id || suggestion.email,
        suggestion: suggestion,
        selected: suggestion === highlightedSuggestion,
        onClick: onClick === null || onClick === void 0 ? void 0 : onClick.bind(null, suggestion),
        onMouseOver: onHover === null || onHover === void 0 ? void 0 : onHover.bind(null, suggestion)
      });
    }));
  })));
};

export default Autocomplete;