import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import enhanceWithClickOutside from "react-click-outside";
import styled from "styled-components";
const Wrapper = styled.div `
  margin-left: 5px;
  display: inline-block;
  cursor: pointer;
`;
const Zoom = () => (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "6.49629", cy: "6.49629", r: "5.49629", stroke: "#BEE1FF", strokeWidth: "2" }), _jsx("path", { d: "M10.5573 10.5544L14.0024 13.9996", stroke: "#BEE1FF", strokeWidth: "2" })] }));
const Close = () => (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M4.46338 4.46558L13.3923 13.3945", stroke: "#BEE1FF", strokeWidth: "2" }), _jsx("path", { d: "M4.46338 13.3923L13.3923 4.4634", stroke: "#BEE1FF", strokeWidth: "2" })] }));
const SearchWrapper = styled.div `
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
`;
const SearchInput = styled.input `
  font-size: 16px;
  font-family: Bold;
  color: black;
  border: none;
  width: 80px;
  :focus {
    border: none;
    outline: none;
  }
`;
class SearchIcon extends React.Component {
    state = {
        isSearching: false,
    };
    inputRef = React.createRef();
    handleZoomClick = () => {
        this.setState({ isSearching: true });
    };
    handleCloseClick = () => {
        const input = this.inputRef.current;
        if (input) {
            input.value = "";
            this.setState({ isSearching: false });
            this.props.handleInput("");
        }
    };
    handleClickOutside = () => {
        this.handleCloseClick();
    };
    handleInput = (e) => {
        this.props.handleInput(e.currentTarget.value);
    };
    render() {
        return (_jsx(Wrapper, { children: this.state.isSearching ? (_jsxs(SearchWrapper, { children: [_jsx(SearchInput, { autoFocus: true, onInput: this.handleInput, ref: this.inputRef }), _jsx("div", { onClick: this.handleCloseClick, children: _jsx(Close, {}) })] })) : (_jsx("div", { onClick: this.handleZoomClick, children: _jsx(Zoom, {}) })) }));
    }
}
export default enhanceWithClickOutside(SearchIcon);
//# sourceMappingURL=search-icon.js.map