import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject;
import styled from 'styled-components';
export var ClearIcon = function ClearIcon(_ref) {
  var showClear = _ref.showClear,
    setSearchString = _ref.setSearchString,
    searchString = _ref.searchString,
    setFocus = _ref.setFocus,
    onClear = _ref.onClear;
  var handleClearSearchString = function handleClearSearchString() {
    setSearchString({
      target: {
        value: ''
      }
    });
    setFocus();
    onClear();
  };
  if (!showClear) {
    return null;
  }
  if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.length) <= 0) {
    return null;
  }
  return /*#__PURE__*/React.createElement(StyledClearIcon, {
    className: "clear-icon",
    onClick: handleClearSearchString
  }, /*#__PURE__*/React.createElement("svg", {
    width: 20,
    height: 20,
    focusable: "false",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
  })));
};
var StyledClearIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (props) {
  return props.theme.clearIconMargin;
}, function (props) {
  return props.theme.iconColor;
});