'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var Autocomplete_tokens = require('../../Autocomplete.tokens.js');
var SuggestionItem_styles = require('./SuggestionItem.styles.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var SuggestionItem = function SuggestionItem(_ref) {
  var item = _ref.item,
    id = _ref.id,
    onClick = _ref.onClick,
    focused = _ref.focused,
    renderItem = _ref.renderItem;
  var ref = React.useRef(null);
  var focusedClass = focused ? Autocomplete_tokens.classes.suggestionItemIsFocused : undefined;
  var handleClick = function handleClick() {
    if (onClick) {
      onClick(item);
    }
  };
  React.useEffect(function () {
    if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
      ref.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    }
  }, [focusedClass]);
  return /*#__PURE__*/React__default.default.createElement(SuggestionItem_styles.Wrapper, {
    id: id,
    role: "option",
    "aria-selected": focused,
    onClick: handleClick,
    ref: ref,
    className: focusedClass
  }, renderItem ? renderItem(item) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, item.contentLeft, /*#__PURE__*/React__default.default.createElement(SuggestionItem_styles.StyledText, null, item.label), item.contentRight));
};

exports.SuggestionItem = SuggestionItem;
