import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["value", "onChange", "onClick", "buttonTooltip", "placeholder"];
import React from "react";
import makeStyles from "../styles/makeStyles";
import createComponent from "../system/createComponent";
import TextField from "../next/TextField";
import CssFlex from "../CssFlex";
import InputAdornment from "../next/InputAdornment";
import SearchIcon from "../Icon/Search";
import FilterIcon from "../Icon/Equalizer";
import Tooltip from "../lab/Tooltip";
var getClasses = makeStyles(function (_ref) {
  var colors = _ref.cleverUI.colors;
  return {
    // @ts-ignore
    filterBtn: function filterBtn(_ref2) {
      var active = _ref2.active;
      return {
        border: "solid 2px ".concat(active ? colors.primary[50] : colors.neutral[300]),
        backgroundColor: active ? colors.primary[50] : "white",
        borderRadius: "8px",
        width: "48px",
        height: "48px",
        cursor: "pointer",
        boxSizing: "border-box",
        "&:hover": {
          border: "solid 2px ".concat(active ? "inherit" : colors.neutral[400])
        }
      };
    }
  };
});

var FilterButtonWrapper = function FilterButtonWrapper(_ref3) {
  var children = _ref3.children,
      buttonTooltip = _ref3.buttonTooltip;

  if (buttonTooltip) {
    return /*#__PURE__*/React.createElement(Tooltip, {
      title: buttonTooltip
    }, children);
  }

  return children;
};

var FilterActions = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var classes = getClasses({
    active: props.active
  });

  var value = props.value,
      onChange = props.onChange,
      onClick = props.onClick,
      buttonTooltip = props.buttonTooltip,
      placeholder = props.placeholder,
      otherProps = _objectWithoutProperties(props, _excluded);

  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(CssFlex, _extends({
      gap: "sm"
    }, otherProps), /*#__PURE__*/React.createElement(TextField // @ts-ignore
    , {
      type: "search",
      value: value,
      onChange: onChange,
      startAdornment:
      /*#__PURE__*/
      // @ts-ignore
      React.createElement(InputAdornment, null, /*#__PURE__*/React.createElement(SearchIcon, {
        color: "blue"
      })),
      placeholder: placeholder
    }), /*#__PURE__*/React.createElement(FilterButtonWrapper, {
      buttonTooltip: buttonTooltip
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: onClick,
      className: classes.filterBtn
    }, /*#__PURE__*/React.createElement(CssFlex, {
      textAlign: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(FilterIcon, {
      color: "blue"
    })))))
  );
});

if (process.env.NODE_ENV !== "production") {
  // @ts-ignore
  FilterActions.displayName = "NextFilterActions";
}

var StyledFilterActions = createComponent(FilterActions);
export default StyledFilterActions;