import PropTypes from "prop-types";
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import useTranslation from "../../utils/useTranslation";
import { setSearchOpen } from "../../model/app/actions";
import { ReactComponent as SearchIcon } from "./Search.svg";
import SearchInfo from "./SearchInfo";
function SearchToggle(_ref) {
  let {
    children
  } = _ref;
  const searchOpen = useSelector(state => state.app.searchOpen);
  const {
    t
  } = useTranslation();
  const dispatch = useDispatch();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "wkp-search-toggle-container".concat(searchOpen ? "--open" : "")
  }, children, /*#__PURE__*/React.createElement(SearchInfo, null)), !searchOpen && /*#__PURE__*/React.createElement("button", {
    className: "wkp-search-toggle-button",
    type: "button",
    onClick: () => dispatch(setSearchOpen(true))
  }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement("span", null, t("Suchen"))));
}
SearchToggle.propTypes = {
  children: PropTypes.node
};
export default SearchToggle;
//# sourceMappingURL=SearchToggle.js.map