import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject;
import styled from 'styled-components';
import { SearchIcon } from './SearchIcon';
export default function Results(_ref) {
  var _ref$results = _ref.results,
    results = _ref$results === void 0 ? [] : _ref$results,
    onClick = _ref.onClick,
    setSearchString = _ref.setSearchString,
    showIcon = _ref.showIcon,
    maxResults = _ref.maxResults,
    _ref$resultStringKeyN = _ref.resultStringKeyName,
    resultStringKeyName = _ref$resultStringKeyN === void 0 ? 'name' : _ref$resultStringKeyN,
    highlightedItem = _ref.highlightedItem,
    setHighlightedItem = _ref.setHighlightedItem,
    formatResult = _ref.formatResult,
    _ref$showNoResultsFla = _ref.showNoResultsFlag,
    showNoResultsFlag = _ref$showNoResultsFla === void 0 ? true : _ref$showNoResultsFla,
    _ref$showNoResultsTex = _ref.showNoResultsText,
    showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex;
  var formatResultWithKey = formatResult ? formatResult : function (item) {
    return item[resultStringKeyName];
  };
  var handleClick = function handleClick(result) {
    onClick(result);
    setSearchString(result[resultStringKeyName]);
  };
  var handleMouseDown = function handleMouseDown(_ref2) {
    var event = _ref2.event,
      result = _ref2.result;
    if (event.button === 0) {
      event.preventDefault();
      handleClick(result);
    }
  };
  if (showNoResultsFlag) {
    return /*#__PURE__*/React.createElement(ResultsWrapper, null, /*#__PURE__*/React.createElement("li", {
      "data-test": "no-results-message"
    }, /*#__PURE__*/React.createElement(SearchIcon, {
      showIcon: showIcon
    }), /*#__PURE__*/React.createElement("div", {
      className: "ellipsis"
    }, showNoResultsText)));
  }
  if ((results === null || results === void 0 ? void 0 : results.length) <= 0 && !showNoResultsFlag) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ResultsWrapper, null, results.slice(0, maxResults).map(function (result, index) {
    return /*#__PURE__*/React.createElement("li", {
      className: highlightedItem === index ? 'selected' : '',
      onMouseEnter: function onMouseEnter() {
        return setHighlightedItem({
          index: index
        });
      },
      "data-test": "result",
      key: "rsa-result-".concat(result.id),
      onMouseDown: function onMouseDown(event) {
        return handleMouseDown({
          event: event,
          result: result
        });
      },
      onClick: function onClick() {
        return handleClick(result);
      }
    }, /*#__PURE__*/React.createElement(SearchIcon, {
      showIcon: showIcon
    }), /*#__PURE__*/React.createElement("div", {
      className: "ellipsis",
      title: result[resultStringKeyName]
    }, formatResultWithKey(result)));
  }));
}
var ResultsWrapper = function ResultsWrapper(_ref3) {
  var children = _ref3.children;
  return /*#__PURE__*/React.createElement(StyledResults, null, /*#__PURE__*/React.createElement("div", {
    className: "line"
  }), /*#__PURE__*/React.createElement("ul", null, children));
};
var StyledResults = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ", ";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ", ";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n\n  .ellipsis {\n    text-align: left;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .selected {\n    background-color: ", ";\n  }\n"])), function (props) {
  return props.theme.lineColor;
}, function (props) {
  return props.theme.maxHeight;
}, function (props) {
  return props.theme.hoverBackgroundColor;
});